Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@ice/store

1.4.2 • 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.

Community

DingTalk community GitHub issues Gitter
issues gitter

License

MIT

Keywords

Install

npm i @ice/store

DownloadsWeekly Downloads

317

Version

1.4.2

License

MIT

Unpacked Size

157 kB

Total Files

64

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar