@ice/store
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.3 • Public • Published

    English | 简体中文

    icestore

    Simple and friendly state for React.

    NPM version Package Quality build status NPM downloads Known Vulnerabilities David deps codecov

    🕹 CodeSandbox demos 🕹
    Counter Todos

    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.

    Basic example

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { createStore } from '@ice/store';
    
    const delay = (time) =>
      new Promise((resolve) => setTimeout(() => resolve(), time));
    
    // 1️⃣ Use a model to define your store
    const counter = {
      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

    Documents

    Examples

    Browser Compatibility

    Chrome Firefox Edge IE Safari Opera UC
    9+

    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.

    If you're interested in icestore, see CONTRIBUTING.md for more information to learn how to get started.

    Develop:

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

    License

    MIT

    Keywords

    Install

    npm i @ice/store

    DownloadsWeekly Downloads

    1,285

    Version

    1.4.3

    License

    MIT

    Unpacked Size

    224 kB

    Total Files

    64

    Last publish

    Collaborators

    • luhengchang228
    • sobear
    • clarkxia
    • yuanyan
    • rax-publisher
    • solojiang
    • chenbin93
    • maoxiaoke