文章首发于个人博客 https://github.com/mcuking/bl...相关代码请查阅 https://github.com/mcuking/bl...react
本讲主要解决如何在 react 中更优雅的使用 redux,即实现 react-reduxgit
在实现 react-redux 以前,咱们首先须要了解 react 的 context 机制。当须要将某个数据设置为全局,便可使用 context 在父组件声明,这样其下面的全部子组件均可以获取到这个数据。github
基于 context 机制,咱们定义一个 Provider,做为应用的一级组件,专门负责将传入的 store 放到 context 里,全部子组件都可以直接获取 store,并不渲染任何东西。redux
// Provider 负责将store放到context里,全部子组件都可以直接获取store export class Provider extends Component { // 使用context须要使用propType进行校验 static childContextTypes = { store: PropTypes.object }; constructor(props, context) { super(props, context); this.store = props.store; // 将传进来的store做为自己的store进行管理 } // 将传进来的store放入全局context,使得下面的全部子组件都可得到store getChildContext() { return { store: this.store }; } render() { return this.props.children; } }
对应业务代码以下:dom
import React from 'react'; import ReactDOM from 'react-dom'; import { createStore } from './mini-redux'; import { Provider } from './mini-react-redux'; import { counter } from './index.redux'; import App from './App'; const store = createStore(counter); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );
connect 负责链接组件,将 redux 中的数据传入组件的属性里,所以须要完成下面两件事:ide
所以 connect 自己是一个高阶组件,首先接收下面两个参数,而后再接收一个组件:函数
const mapStateToProps = state => { return { num: state }; };
const mapDispatchToProps = { buyHouse, sellHouse }; // action creator export function buyHouse() { return { type: BUY_HOUSE }; } export function sellHouse() { return { type: SELL_HOUSE }; }
第一步,咱们将 mapStateToProps 的返回值,即组件须要的全局状态 state 中的某个状态,以参数的形式传给新构建的组件,代码以下:this
export const connect = ( mapStateToProps = state => state, mapDispatchToProps = {} ) => WrapComponent => { // 高阶函数,连续两个箭头函数意味着嵌套两层函数 return class ConnectComponent extends Component { // 使用context须要使用propType进行校验 static contextTypes = { store: PropTypes.object }; constructor(props, context) { super(props, context); this.state = { props: {} }; } componentDidMount() { this.update(); } // 获取mapStateToProps返回值,放入到this.state.props update() { const { store } = this.context; // 获取放在全局context的store const stateProps = mapStateToProps(store.getState()); this.setState({ props: { ...this.state.props, ...stateProps } }); } render() { return <WrapComponent {...this.state.props} />; } }; };
第二步,咱们须要将 mapDispatchToProps 这个对象中修改全局状态的方法传入给组件,可是直接将相似 buyHouse 方法传给组件,并在组件中执行 buyHouse()方法并不能改变全局状态。spa
联想到上一讲 redux 中,修改全局状态,须要使用 store 的 dispatch 方法,dispatch 对应代码以下:code
function dispatch(action) { // reducer根据老的state和action计算新的state currentState = reducer(currentState, action); // 当全局状态变化时,执行传入的监听函数 currentListeners.forEach(v => v()); return action; }
其中须要外部传入 action,即一个对象,例如{type: BUY_HOUSE}
。所以咱们须要将 buyHouse 方法的返回值 action 对象,传给 store.dispatch 方法,执行后才能改变全局状态。对应代码以下:
buyHouse = () => store.dispatch(buyHouse());
对此,咱们封装一个方法 bindActionCreators,入参为 mapDispatchToProps 和 store.dispatch,返回相似 buyHouse = () => store.dispatch(buyHouse())的方法的集合,即便用 dispatch 将 actionCreator 的返回值包一层,代码以下:
// 将 buyHouse(...arg) 转换为 (...arg) => store.dispatch(buyHouse(...arg)) function bindActionCreator(creator, dispatch) { return (...arg) => dispatch(creator(...arg)); // 参数arg透传 } // creators 示例 {buyHouse, sellHouse, buyHouseAsync} export function bindActionCreators(creators, dispatch) { let bound = {}; for (let v in creators) { bound[v] = bindActionCreator(creators[v], dispatch); } return bound; }
所以,咱们就能够第一步的基础上,将 store.dispatch 包装后的 actionCreator 集合对象,传给组件,代码以下:
export const connect = ( mapStateToProps = state => state, mapDispatchToProps = {} ) => WrapComponent => { // 高阶函数,连续两个箭头函数意味着嵌套两层函数 return class ConnectComponent extends Component { // 使用context须要使用propType进行校验 static contextTypes = { store: PropTypes.object }; constructor(props, context) { super(props, context); this.state = { props: {} }; } componentDidMount() { const { store } = this.context; store.subscribe(() => this.update()); // 每当全局状态更新,均须要更新传入组件的状态和方法 this.update(); } // 获取mapStateToProps的返回值 和 mapDispatchToProps,放入到this.state.props update() { const { store } = this.context; // 获取放在全局context的store const stateProps = mapStateToProps(store.getState()); // 方法不能直接传,由于须要dispatch // 例如直接执行addHouse()毫无心义,须要buyHouse = () => store.dispatch(addHouse())才有意义 // 其实就使用diapatch将actionCreator包了一层 const dispatchProps = bindActionCreators( mapDispatchToProps, store.dispatch ); this.setState({ props: { ...this.state.props, ...stateProps, ...dispatchProps } }); } render() { return <WrapComponent {...this.state.props} />; } }; };
注意,除了将 dispatchProps 传给组件以外,上面代码还在组件的 componentDidMount 生命周期中,将 update 函数设置为监听函数,即
store.subscribe(() => this.update())
从而,每当全局状态发生变化,都会从新获取最新的传入组件的状态和方法,实现组件状态与全局状态同步的效果。
相关文章以下: