react-soliit
TypeScript icon, indicating that this package has built-in type declarations

1.0.9 • Public • Published

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

Package Sidebar

Install

npm i react-soliit

Weekly Downloads

37

Version

1.0.9

License

ISC

Unpacked Size

1.12 MB

Total Files

32

Last publish

Collaborators

  • smakazmi