simple-redux-store
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

简单好用的 redux 状态管理

安装

npm / yarn

$ npm install --save simple-redux-store
$ yarn add simple-redux-store

特点

  1. 简单, 一共4个api,configureStore用于创建全局状态,Provider组件将store提供给子孙组件,useAppData用于获取状态,useUpdateStore 获取更新状态的函数
  2. 支持 web/node/taro/微信小程序等环境

Usage

  1. 创建 store, 通过Provider提供给子组件
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, configureStore } from 'simple-redux-store';
import App from './App';

const store = configureStore({ name: 'leonwgc' }, true);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

2.读取状态

import React from 'react';
import { useAppData } from 'simple-redux-store';

export default function App() {
  // 获取全部全局状态, 任何状态变更都会导致组件重新渲染
  const app = useAppData();

  return <div>hello {app.name}</div>;
}
import React from 'react';
import { useAppData } from 'simple-redux-store';

export default function App() {
  // 获取组件需要的状态,相关状态变化才重新渲染,状态变化默认使用对象浅比较算法
  // 你也可以提供自己的算法 type EqualityFn = (left: any, right: any) => boolean
  // 这里state.app.name变化组件才会重新渲染
  const app = useAppData('name');

  return <div>hello {app.name}</div>;
}

3.更新状态

import React from 'react';
import { useUpdateStore, useAppData } from 'simple-redux-store';

export default function App() {
  const updateStore = useUpdateStore();

  const { name = 'default' } = useAppData('name');

  return (
    <div
      onClick={() => {
        updateStore({ name: 'new name' });
      }}
    >
      {app.name}
    </div>
  );
}

Readme

Keywords

Package Sidebar

Install

npm i simple-redux-store

Weekly Downloads

13

Version

2.0.0

License

MIT

Unpacked Size

12.3 kB

Total Files

8

Last publish

Collaborators

  • leonwgc