react-ion-store

State and network handling in React

It should be called react-ion, but since npm has weird rules handling package names, I had to pick a different name. Thus react-ion-store. This library is fully built in Typescript and is meant to be used within React.

react-ion-store leverages the React Context API and Immutable JS for it's internal state management and uses Axios to fill your component with network data. It also has Higher-Order Components (HoCs) built in to neatly present the data in your props.

Using withStore in your components makes sure you don't have to pass down your props through various parent components, this is where the Context API really shines.

Installation

npm i react-ion-store --save
yarn add react-ion-store

Usage

Please visit the docs (WIP) for in-depth documentation! 🙏

Basic Usage Example

// Counter.js
import React from "react";
import { withStore } from "react-ion-store";

class Counter extends React.Component {
  updateCounter = counter => {
    this.props.store.set({ counter });
  };

  increment = () => {
    const { counter } = this.props.store.get("counter");
    this.updateCounter(counter + 1);
  };

  decrement = () => {
    const { counter } = this.props.store.get("counter");
    this.updateCounter(counter - 1);
  };

  render() {
    const { counter } = this.props.store.get("counter");
    return (
      <div>
        <p>Counter: {counter}</p>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}

export default withStore(Counter);

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { StoreProvider } from "react-ion-store";

import Counter from "./Counter";

const store = { counter: 0 };

ReactDOM.render(
  <StoreProvider store={store}>
    <Counter>
  </StoreProvider>,
  document.getElementById("root")
);