Redux源码聊聊

1.createStore(reducer,preloadedState,enhance)

参数:  
    reducer:给出action和当前state,返回下一个新的state;

    initState:初始化state, 如果reducer是使用combineReducer提供的方法,
                      那么state一定是和reducer的key值一样的结构对象;

    enhancer:必须是fun,不然会报错,高阶函数,返回强化过的高阶函数,
                        就是将creatStore的能力增强 。
返回:
    store:可供读写并且监控改变的store,当然写只能通过dispatch(state, action)了


注册了4个方法: 
    getState()
        获得store中当前的状态。

    dispath(action)
        分发一个action,并返回这个 action,这是唯一能改变 store 中数据的方式。

    subscrible(listener)
        注册一个监听者,他在 store 发生变化时被调用。

    replaceReducer(nextReducer)
        更新当前 store 里的reducer

createStore就是一个大的闭包,就是一个函数里面有别的函数的话,那么在外部调用里面的函数,那么在外部函数的state,reducer,listener都不会被销毁,就一直存在,里面的函数可以对公共方法变量进行读写。。。我可真是一个小机灵鬼~~~

  源码大概200行,很多注释,我翻译一下

Redux源码聊聊_第1张图片
校验参数+公共方法变量赋值
Redux源码聊聊_第2张图片
获得state
Redux源码聊聊_第3张图片
替换reducer
监听器
Redux源码聊聊_第4张图片
返回对象


2.combineReducers(reducers):把reducer函数检查过滤,合成一个新的函数,dispatch的时候,挨个执行每个reducer

    接收reducers对象(key-value),以reducers的name作为key。

Redux源码聊聊_第5张图片
初始化

    过滤掉value是undefined的reducers,生成一个新的reducers对象。finalReducers

Redux源码聊聊_第6张图片
过滤无效的reducers

    通过assertReducerShape检查错误的reducers,检查形式是:
        ①reducer(undefined, { type: ActionTypes.INIT }),先检验initialState返回的是不是undefined;         ②reducer(undefined, { type }),检验随机的一个type是否会返回undefined

Redux源码聊聊_第7张图片
reducer检查

返回一个函数combination,这个方法才是最终的reducer,因此dispatch的时候,是调用了这个函数。该方法接受state和action两个参数,每次都会逐个调用每一个小的reducer,返回一个单独的{key-value}对象state,key与reducer的key保持一致。

Redux源码聊聊_第8张图片
参数
Redux源码聊聊_第9张图片
检验reducer
Redux源码聊聊_第10张图片
核心代码

    这点代码的意思是,每个reducer(prevState,action)返回的就是新的state[key],最终每个reducer给state一个key,组成一个完整的state。

重点:
    ①state只有一个,就是createStore创建出来的state,state的属性有几个是根据combinReducer有几个reducer决定的;
    ②执行上面方法的时候,穿进去的state是对应当前reducer的state,比如state.todos / state.visibility;

附上参考文档:https://blog.csdn.net/bgk083/article/details/50867365

3.applyMiddleware

    创建一个store强化器,能提供中间件去dispatch action。

    看代码就是。。。先创建createStore,再循环参数,将state和dispatch作为参数传入,依次调用中间件,将上次的调用返回的store传入下一个中间件。

redux执行同步的数据修改是没问题的,但是异步的数据修改,需要redux-thunk中间件,就是action发出后过一段时间再执行reducer。

中间件会被放在applyMiddleware()中,在applyMiddleware方法中,遍历所有的middleware,将state和dispatch作为参数传入,依次执行,最后才dispatch action,这就实现了,在action和reducer之间增加了功能,可以做异步处理的地方。

4.bindActionCreators

bindActionCreators唯一的用处就是在子组件未察觉redux的情况下,将dispatch传递给子组件。

5.compose

    深度执行函数,从右到左,依次执行。applyMiddleware 机制的核心在于组合 compose,将不同的 middlewares 一层一层包裹到原生的 dispatch 之上,

compose(a, b, c)

c( b( a(...arguments) ) )

6.react-redux

redux实现了状态数据的集中管理,dispatch时候,redux里面的数据确实变了,但是react并没有变化,所以还要监听state变化,然后setState,那么就是左右应用store的子组件都要监听state的变化,麻烦!!!

react-redux就是为此而生,它提供Provider和connect。顶层组件必须包裹在Provider里面,并且store必须作为参数放在Provider里面。

6.1 Provider

    提供3中方法:
        getChildContext:外部store对象放入context中,使子孙组件能够直接访问
        render:渲染子级元素,使整个应用成为provider的子组件
        constructor:初始化获得props中的store


   

provider会将由props传入的store,渲染到自己的context上,再由connect取出context的内容,渲染到子组件上

6.2 connect

    connect是高阶组件,接受参数,吐出一个高级的组件,connect接受两个方法一个组件。
    connect(mapStateToProps, mapDispatchToProps)(component)。

    connect会取出context里的store,然后把store里面的数据映射到当前组件的props,使得组件只要在props使用数据和方法就可以,不用再去context里面取值+监听变化+重新渲染视图。

const mapStateToProps  (state)  {
    return {
        data1: state.data1,
        data2: state.data2,
        ...
    }
}
这里面的参数state,是在connect函数里面调用mapStateToProps的时候传进去的,所以不会报state未定义的错。

const mapDispatchToProps  (state)  {   
    return {       
        changeColor: (color) => {
            dispatch({ type: 'CHANGE_COLOR', themeColor: color })
        } ,       
        changeText: (text) => {           
            dispatch({ type: 'CHANGE_TEXT', themeText: text })       
         }       
        ...    
    }
 }

7.redux-trunk    

    可以接受一个返回函数的action creator。如果这个action creator 返回的是一个函数,就执行它,如果不是,就按照原来的next(action)执行

Redux源码聊聊_第11张图片
redux-thunk

8.柯里化curring

    一个函数可以接受很多参数,柯里化函数,就是只接受一个参数,利用返回的函数,来处理剩下的参数

    fn(a, b, c, d) => fn(a)(b)(c)(d)
    fn(a, b, c, d) => fn(a, b)(c)(d)
    fn(a, b, c, d) => fn(a)(b, c, d)
    fn(a, b, c, d) => fn(a)(b)(c)(d)()
    fn(a, b, c, d) => fn(a);fn(b);fn(c);fn(d)

你可能感兴趣的:(Redux源码聊聊)