@ice/store

Simple and friendly state for React

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@ice/store
38622.0.3a month ago3 years agoMinified + gzip package size for @ice/store in KB

Readme

English | 简体中文
icestore
Simple and friendly state for React.

NPM version build status NPM downloads codecov

Versions

| Version | Branch | Docs | | --- | --- | --- | | V2 | master | Docs | V1 | stable/1.x | Docs

Introduction

icestore is a simple and friendly state management library for React. It has the following core features:
  • Minimal & Familiar API: No additional learning costs, easy to get started with the knowledge of Redux && React Hooks.
  • Built in Async Status: Records loading and error status of effects, simplifying the rendering logic in the view layer.
  • Class Component Support: Make old projects enjoying the fun of lightweight state management with friendly compatibility strategy.
  • TypeScript Support: Provide complete type definitions to support intelliSense in VS Code.

See the comparison table for more details.

Documents

Examples

Basic example

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, createModel } from '@ice/store';

const delay = (time) =>
  new Promise((resolve) => setTimeout(() => resolve(), time));

// 1️⃣ Use a model to define your store
const counter = createModel({
  state: 0,
  reducers: {
    increment: (prevState) => prevState + 1,
    decrement: (prevState) => prevState - 1,
  },
  effects: () => ({
    async asyncDecrement() {
      await delay(1000);
      this.decrement();
    },
  }),
});

const models = {
  counter,
};

// 2️⃣ Create the store
const store = createStore(models);

// 3️⃣ Consume model
const { useModel } = store;
function Counter() {
  const [count, dispatchers] = useModel('counter');
  const { increment, asyncDecrement } = dispatchers;
  return (
    <div>
      <span>{count}</span>
      <button type="button" onClick={increment}>
        +
      </button>
      <button type="button" onClick={asyncDecrement}>
        -
      </button>
    </div>
  );
}

// 4️⃣ Wrap your components with Provider
const { Provider } = store;
function App() {
  return (
    <Provider>
      <Counter />
    </Provider>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

Installation

icestore requires React 16.8.0 or later.
npm install @ice/store --save

Inspiration

icestore refines and builds upon the ideas of rematch & constate.

Contributors

Feel free to report any questions as an issue, we'd love to have your helping hand on icestore.
Develop:
$ cd icestore/
$ npm install
$ npm run test
$ npm run watch

$ cd examples/counter
$ npm install
$ npm link ../../                    # link icestore
$ npm link ../../node_modules/react  # link react
$ npm start

License

MIT