Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ice-lab/icestore
🌲 Simple and friendly state for React
https://github.com/ice-lab/icestore
hooks icestore react typescript
Last synced: 2 months ago
JSON representation
🌲 Simple and friendly state for React
- Host: GitHub
- URL: https://github.com/ice-lab/icestore
- Owner: ice-lab
- License: mit
- Created: 2019-04-23T13:48:47.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-31T08:43:13.000Z (over 1 year ago)
- Last Synced: 2024-10-25T03:11:35.031Z (3 months ago)
- Topics: hooks, icestore, react, typescript
- Language: TypeScript
- Homepage:
- Size: 403 KB
- Stars: 397
- Watchers: 20
- Forks: 35
- Open Issues: 4
-
Metadata Files:
- Readme: README.en.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-state - icestore
- awesome-react-state-management - icestore - Lightweight state management solution based on React Hooks. (List)
README
English | [简体中文](./README.md)
# icestore
> Simple and friendly state for React.
[](https://npmjs.org/package/@ice/store)
[](https://github.com/ice-lab/icestore/actions/workflows/ci.yml)
[](https://npmjs.org/package/@ice/store)
[](https://codecov.io/gh/ice-lab/icestore)
## Versions
| Version | Branch | Docs |
| --- | --- | --- |
| V2 | master | [Docs](https://github.com/ice-lab/icestore#文档)
| V1 | stable/1.x | [Docs](https://github.com/ice-lab/icestore/tree/stable/1.x#documents)
## 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](docs/recipes.md#能力对比表) for more details.
## Documents
- [API](./docs/api.md)
- [Recipes](./docs/recipes.md)
- [Upgrade from V1](./docs/upgrade-guidelines.md)
- [Q & A](./docs/qna.md)
## Examples
- [Counter](https://codesandbox.io/s/github/ice-lab/icestore/tree/master/examples/counter)
- [Todos](https://codesandbox.io/s/github/ice-lab/icestore/tree/master/examples/todos)
- [Class Component Support](https://codesandbox.io/s/github/ice-lab/icestore/tree/master/examples/classComponent)
- [withModel](https://codesandbox.io/s/github/ice-lab/icestore/tree/master/examples/withModel)
## Basic example
```jsx
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 (
{count}
+
-
);
}
// 4️⃣ Wrap your components with Provider
const { Provider } = store;
function App() {
return (
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(, rootElement);
```
## Installation
icestore requires React 16.8.0 or later.
```bash
npm install @ice/store --save
```
## Inspiration
icestore refines and builds upon the ideas of [rematch](https://github.com/rematch/rematch) & [constate](https://github.com/diegohaz/constate).
## Contributors
Feel free to report any questions as an [issue](https://github.com/ice-lab/icestore/issues/new), we'd love to have your helping hand on icestore.
Develop:
```bash
$ 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](LICENSE)