redux-spliting v1.0.4

redux-spliting

CODING 项目正在拆分微前端, 目前所有的 Redux Reducer 都集中在全局的 store 中, 很多子模块内部的 Redux Reducer 可以私有化, 方便状态管理

快速开始

yarn

yarn add @coding-frontend/redux-spliting --registry=https://codingcorp-npm.pkg.coding.net/micro-frontend/public-npm/

在模块入口添加以下逻辑

import React from 'react';
import { Provider } from '@coding-frontend/redux-spliting';
import { store } from 'share/store';
import loginReducer from './store/reducers';

class Login extends React.Component {
  render() {
    return (
      <Provider name="login" store={store} reducer={loginReducer}>
        <Alert />
      </Provider>
    );
  }
}

import { connect } from '@coding-frontend/redux-spliting';

class Alert extends React.Component {
  render() {
    console.log(this.props);
    return <div>complete!</div>;
  }
}
export default connect(state => state)(Alert);

.npmrc 参考

@coding-frontend:registry=https://codingcorp-npm.pkg.coding.net/micro-frontend/public-npm/

参数说明

<Provider
  name={name} // 当前模块名称, 当前值在Provier中唯一
  store={store} // 全局创建的 redux store, 通过 import {createStore} from 'redux'
  reducer={reducer} // 模块需要使用的 redux root reducer
  preloadedState={state} // createStore(, preloadedState,)
  middlewares={applyMiddleware(...middlewares)} // createStore(, , middlewares) 需要 dispatch 的中间件
  dispatchBubbles={true} // boolean, dispatch是否冒泡至全局的store dispatch中
/>;

connect(
  mapStateToProps, // 需要传递给子组件的state, 同 react-redux 中的 connect 第一个参数
  mapDispatchToProps // 需要传递给子组件的action creator, 同 react-redux 中的 connect 第二个参数
)(Component);