decorator-redux

用更便捷的方式使用 react-redux

安装

npm i @luoyefe/decorator-redux

使用

Store

store 部分借鉴 vuex 的实现，单个 module 包含 state reducers actions 以及 modules 四部分

actions 支持异步

modules 支持多层嵌套

reducer 真实修改 state 的纯函数

actions 暂不支持跨 module 调用，请在业务逻辑中组合不同 actions

// store/index.js
import shop from './modules/shop';

export default {
  state: {
    index: 0,
  },
  reducers: {
    ADD(state) {
      const result = state.activeTabIndex + 1;
      return {
        ...state,
        index: result,
      }
    }
  },
  actions: {
    add({ dispatch }) {
      dispatch('ADD');
    },
  },
  modules: {
    shop,
  },
};

// store/modules/shop.js
export default {
  state: {
    info: null,
  },
  reducers: {
    updateShopInfoReducer(state, info) {
      return {
        ...state,
        info: info,
      };
    },
  },
  actions: {
    updateShopInfo({ dispatch }, info) {
      setTimeout(() => {
        dispatch('updateShopInfoReducer', info);
      }, 1000);
    },
  },
};

Component

使用 RootStoreDecorator ChildStoreDecorator 分别装饰根组件与子组件

组件内可以通过访问 this.props.store 获取 store 对象

store 包含三个属性

• state: 当前状态

• dispatch: 分发 actions 钩子

• originStore: 指向 redux 原始 store，可以使用 getState 等方法（不推荐）

// root component
import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';

import { RootStoreDecorator } from '@luoyefe/decorator-redux';

import store from './store/index';

import Children from './children';

@RootStoreDecorator({ store }) // 根组件传入 store
class App extends PureComponent {
  handleClick() {
    this.props.store.dispatch('add');
  }

  render() {
    return (
      <div>
        <div onClick={this.handleClick.bind(this)}>{this.props.store.state.activeTabIndex}</div>
        <Children />
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);


// child component
import React, { PureComponent } from 'react';

import { ChildStoreDecorator } from '@luoyefe/decorator-redux';

@ChildStoreDecorator()
class Children extends PureComponent {
  handleClick() {
    this.props.store.dispatch('shop/updateShopInfoReducer', {
      shopId: 123,
      shopName: 'test shop'
    });
  }

  render() {
    return (
      <h1 onClick={this.handleClick.bind(this)}>Children {JSON.stringify(this.props.store.state.shop.info)}</h1>
    );
  }
}

export default Children;