美文网首页
Redux 源码初探

Redux 源码初探

作者: 轻微 | 来源:发表于2017-02-02 02:26 被阅读101次

    标签: 源码解析,前端


    Redux

    1. Reducer

    combineReducers
    将多个reducer 合并成一个reducer . 在后面store处理中. 可以直接是操作这个合并的reducer ,而不用操作多个reducer..每个reducer 处理返回的state 存储在store 的state 以reducer名称为key.

    2. Store

    createStore
    维护一个state.这个state 是redux 的state 跟react 的state 不同.同时提供了几个方法:
    getState(): 返回当前的state
    subscribe(): 监听state 的变化
    dispatch(): 当用户发起一个action会使用这个方法将action 传递给reducer.
    同时对注册的监听器进行回调.
    replaceReducer: 替换Reducer

    3.Action

    bindActionCreator
    将我们生成action 的方法跟dispatch方法连接起来.
    例如. 有一个生成actionB 的方法createActionB .
    通过 bindActionCreator 会生成方法新的createActionB .新的会代理上面的createActionB然后将生成的actionB 使用dispatch派发出去.

    4.Middleware

    applyMiddleware
    这应该是redux 中最有意思的一个方法.
    通过使用createStore 生成一个store和dispatch
    当用户的action发起以后会先经过middlewares ,先被middlewares处理, 然后处理过的action再被上面dispatch处理掉.
    通过中间件我们可以做特别有意思的意思, 比如日志跟踪,时光旅行,异步action
    这里主要是用一个dispatch 来代理store的dispatch 方法.来实现中间件的功能.

    Paste_Image.png

    react-redux

    connect
    mapStateToProps: 将redux 的state 转换成props
    mapDispatchToProps: 主要用于将action和dispatch 连接起来然后放置在props 中
    mergeProps: 讲上面的两个生成的props 和connect 自己的props 合并在一起传递给子控件.

    connectAdvanced:
    该方法在 redux 5.0 加入.
    看这个方法名可以看出这个是connect 的高阶版. 有更自由的定制.和更好的扩展. 比方说指定特定的store,然后更灵活的组合props.
    从可以指定特定store上可以看出.官方开始拥抱多store 的方案.

    Provider
    这是一个Component 所以它有Component 有的生命周期. 这个的作用其实就是将redux 生成的store 传递到下面的Component.界面的渲染交给他的子类来处理.

    tip:

    store 的state 和react 中的state 在react-redux 中的关系.
    在react-redux 3.0 中 store 的state 存储在react 的state 中以storeState 为key.
    在react-redux 4.0 中store 的state 直接存储在react 的state , 这里可以把这两个当成同一个东西.
    在react-redux 5.0 中store 的state 已经从react 的state 中剥离出来.

    react-thunk

    function createThunkMiddleware(extraArgument) {
      return ({ dispatch, getState }) => next => action => {
        if (typeof action === 'function') {
          return action(dispatch, getState, extraArgument);
        }
    
        return next(action);
      };
    }
    const thunk = createThunkMiddleware();
    thunk.withExtraArgument = createThunkMiddleware;
    export default thunk;
    

    这是redux 的中间件. 主要的功能是扩展你的action. 他支持你返回一个function 类型的action. 在中间件的时候调用你的function 并返回可以被Reducer 处理的action.

    尾巴

    redux ,react-redux ,react-thunk 源码还是简单的.但是里面的思想还是值得我们去推敲,琢磨.

    相关文章

      网友评论

          本文标题: Redux 源码初探

          本文链接:https://www.haomeiwen.com/subject/llmkittx.html