react-soliit 🎈

Simple state management solution for React

The 'Store' is all you need

No contexts, or redux, or providers, or consumers, or subscribers, or reducers, or actions, or sagas, or thunks, or epics. None of that. Simply

1. Create store(s)
2. Connect to store(s)

That's it

Installation

npm install react-soliit --save

Example

Imports

import React from "react";
import { render } from "react-dom";
import StateStore, { withStores } from "react-soliit";

Create the Store

const counterStore = new StateStore({ count: 0 });

Create component

const Counter = function({ counterStore }) {
  const increment = () =>
    counterStore.setState({ count: counterStore.state.count + 1 });
  const decrement = () =>
    counterStore.setState({ count: counterStore.state.count - 1 });
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{counterStore.state.count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
};

Connect component with the Store

const ConnectedCounter = withStores(Counter, { counterStore });

Render to DOM

render(<ConnectedCounter />, document.getElementById("root"));

using withStores HOC

The withStores HOC maps store instances to component props. This allows for the injection of mock stores during testing.

Live Examples

Counter Example

Async Action Example

That's all folks