@fekit/react-store

react 数据中心 redux + redux-saga 分模块封装，用以简化 redux 配置与使用成本。

安装

yarn add @fekit/react-store

或

npm i @fekit/react-store

引入

1､安装本插件后，在项目目录中新建 actions 文件

├── public
├── src
│   ├── actions
│   │   ├── index.ts
│   │   ├── module1.ts
│   │   ├── module2.ts
│   │   └── ...
│   └── ...
└── ...

2､ 在 index.ts 中导入所有模块

import * as home from './home';
import * as demo from './demo';

const actions: any = {
  home,
  demo,
};

export default actions;

3､在 react 项目入口文件中使用 store

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import actions from './actions';
import store from '@fekit/react-store';
import Root from './root';

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

使用

1､插件提供了一个万能方法可以直接操作数据中心，比如想给 home 模块数据中存入 test=1 的数据即如下所示。

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { LayerView } from '@fekit/react-layer';

const store = ({ home }: any) => ({ home });
const event = (dispatch: any) => {
  return {
    test() {
      // 万能方法 $
      dispatch({
        type: '$',
        data: {
          key: 'home.test',
          val: 1,
        },
      });
      // 无限层级
      dispatch({
        type: '$',
        data: {
          key: 'home.aaa.bbb.ddd.eee.fff',
          val: 1,
        },
      });

      // 数据是否合并？ 默认替换，开启后将合并新老数据   {aaa:1} => {aaa:1,bbb:2}
      dispatch({
        type: '$',
        data: {
          key: 'home.aaa',
          val: { b: 2 },
          merge: true, // 默认直接替换 {aaa:{a:1}} => {aaa:{b:2}}    开启合并后  {aaa:{a:1}} => {aaa:{a:1,b:2}}
        },
      });
    },
  };
};
function Home(props: any) {
  const { home, test } = props;
  consoe.log(home); // -> {test: 1, aaa: { bbb: { ddd: { eee: { fff: 1 } } } } }
  useEffect(() => {
    test();
    return () => {};
  }, [test]);

  return (
    <div className="home">
      <h1>HOME</h1>
    </div>
  );
}

export default connect(store, event)(Home);

2､ 普通用法

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { LayerView } from '@fekit/react-layer';
import { HOME_GET_DATA } from '../actions/home';

const store = ({ home }: any) => ({ home });
const event = (dispatch: any) => {
  return {
    getData() {
      dispatch({
        type: HOME_GET_DATA.name,
        data: {}, // 传参需要时使用
      });
    },
  };
};
function Home(props: any) {
  const { home, getData } = props;
  useEffect(() => {
    getData();
    return () => {};
  }, [getData]);

  return (
    <div className="home">
      <h1>HOME</h1>
    </div>
  );
}

export default connect(store, event)(Home);

版本

0.3.0
万能方法 $ 添加 fun='set|del' 功能，set为原先功能，del是删除指定元素

0.2.3
万能方法 $ 添加合并功能，在data中开启合并 { merge: true } 可以合并新老数据，而默认是新数据替换老数据。