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

The documenation is still a work in progress. I suggest you take a look at the sidebar on the left, or start at the Setup section.

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")
);