enhance-redux v0.0.4

enhance-redux

安装

npm install enhance-redux

yarn add enhance-redux

model 基本结构

/** common model  */
{
  namespace: "common",
  state: {
    version: "0.0.1",
  },
  reducers: {
    handleChangeVersion({ state, rootState }, payload) {
      return {
        ...state,
        version: payload,
      };
    },
  },
  effects: {
    async changeVersion({ call, push, getState, state, rootState }, payload) {
      let version = await new Promise((resolve, reject) => {
        setTimeout(resolve, 2000, payload);
      });
      call("common/handleChangeVersion", version);
      return version;
    },
  },
};

使用

/** store.js */

import enhanceRedux form 'enhance-redux';
import common form "./common";

/**
 * model 集合
*/
const models = [common];

/**
 * enhancer : redux 插件；（PS：暂未测试）
 * reducer ：自定义 reducer 处理方法函数
 * separator：自定义字段分隔字符，默认 "/"
*/

const option = {
  // enhancer = [],
  // reducer,
  // separator
}

const { store, reducers, register, unRegister } = enhanceRedux(models, option);

/** main.js */
import React form 'react';
import common form "./store";
import App form "./App";

<Provider store={store}>
  <App />
</Provider>

/** App.js  结合 react-redux 使用 */
import React, { useEffect } form 'react';
import { reducers } form "./store"
import { connect } from "react-redux";

const App = (props)=> {
    const {version, changeVersion} = props;
    useEffect(()=>{
        changeVersion('0.0.2')
    },[])
    return <div>{version}</div>
}

const mapStateToProps = (state, own) => {
  return {
    version: state.common.version,
  };
};
/**  两种方式都可以  */
const mapDispatchToProps = ()=>{
    return {
        changeVersion: reducers.common.changeVersion
    }
}  ||  {
    ...reducers.common
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

enhanceRedux 返回值

store

redux 的返回值

reducers

1. 包装后的 model 函数集合（reducers，effects）
2. 同一模块的 effects 与 reducers 的同名函数； effects 会覆盖 reducers
3. 使用方式可 结合 react-redux 使用，也可以直接调用；例如： reducers.common.changeVersion('0.0.2')
4. model 中的 reducers 的返回值会用于直接修改当前 state 的值
5. model 中的 effects 可以结合注入的方法，去修改 当前 state 的值，具体可以查看下面 effect 方法第一个参数列表

register

用于注册 model，需要自己做容错处理

unRegister

用于移除 model，需要自己做容错处理

model effect 方法第一个参数

model reducer 方法第一个参数

TODO

1. redux 中间件测试