实现一个自己的react-redux

最新推荐文章于 2024-04-23 09:54:30 发布

原创最新推荐文章于 2024-04-23 09:54:30 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #redux

react 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析Redux作为前端状态管理工具的核心价值，介绍了其架构模式及如何与React集成，同时提供了简单的编码实现示例。

Redux

编码实现

创建redux.js、react-redux.js。
编辑redux.js：

/**
* 用于创建store
* @param reducer 用户自己创建的reducer
*/
function createStore(reducer) {
    var state = null;
    var listeners = [];
    //dispatch用于派发事件，action包含type和用户自定义的状态信息
    var dispatch = function(action) {
        //更新共享状态
        state = reducer(state,action);
        //派发监听事件
        listeners.forEach(function(listener) {
            listener();
        });
    };
    //订阅者模式，用于实现共享状态更新后，通知React进行更新
    var subscriber = function(listener) {
        listeners.push(listener);
    };
    //用于提供state
    var getState = function() {
        return state;
    };
    //首次调用，用于初始化共享状态的值
    dispatch();
    return {
        dispatch: dispatch,
        subscriber: subscriber,
        getState: getState
    };
}
export default createStore;

react-redux.js:

import React,{Component} from 'react';
import PropTypes from 'prop-types';

/**
* Provider只是一个用于提供上下文的组件
*/
export class Provider extends Component {

    static childContextTypes = {
        store: PropTypes.object
    }

    getChildContext() {
        return {
            store: this.props.store
        }
    }

    render() {
        return (
            <div>{this.props.children}</div>
        )
    }
}
/**
* connect接收用户自定义的mapStateToProps，mapDispatchToProps
* mapStateToProps，mapDispatchToProps用于将state及dispatch以用户自定义的方式提供。
*/
export var connect = function(mapStateToProps,mapDispatchToProps) {
    return function(WrapperComponent) {
        class ConnectComponent extends Component {

            static contextTypes = {
                store: PropTypes.object
            }

            constructor(props) {
                super(props);
                this.state = {
                    allProps: {}
                }
            }

            componentWillMount() {
                //添加监听函数，用于在共享状态改变之后调用以使组件更新
                this.context.store.subscriber(()=>this.updateProps());
                //初始调用，以使组件获取共享状态的初始值
                this.updateProps();
            }

            updateProps() {
                var store = this.context.store;
                //通过mapStateToProps,mapDispatchToProps来分发共享状态
                var stateProps = mapStateToProps?mapStateToProps(store.getState()):{};
                var dispatchProps = mapDispatchToProps?mapDispatchToProps(store.dispatch):{};
                this.setState({
                    allProps: {
                        ...this.props,
                        ...stateProps,
                        ...dispatchProps
                    }
                });
            }

            render() {
                //将用户需要的共享状态和上级传入的属性、修改状态的事件以props的形式传递
                return (<WrapperComponent {...this.state.allProps}/>)
            }
        }
        return ConnectComponent;
    }
}