Redux 初见

Redux初见

本文记录的是本身对redux的学习和理解，但愿能够简洁易懂，入门redux，一步步的走进redux!

---

Redux是什么

Redux是JavaScript应用的状态容器，提供可预测化的状态管理，让你构建一致化的应用，运行于不一样的环境（客户端、服务器、原生应用），而且易于测试。不只于此，它还提供超爽的开发体验。

核心概念

• 【store】保存应用状态全局单一

• 【state】全部state以key-value的形式存储在store中

• 【action】描述发生什么的对象，触发action是惟一改变state的方式，action本质上是一个普通js对象，必必须一个type字段，值为字符串常量

• 【action creator】建立action

• 【reducer】描述action如何改变state

---

Redux经常使用方法

createStore(reducer, [initialState])

建立一个Redux store来以存放应用中全部的state。

combineReducers(reducers)

随着应用复杂度上升，数据源逐渐变混乱，致使组件内部数据调用十分复杂，会产生数据冗余或者混用等状况，须要对reducer函数进行拆分，拆分后的每一模块独立负责管理state的一部分。combineReducers函数的做用是，返回一个最终的rootReducer函数，rootReducer作的事情是获得一个由多个不一样reducer函数做为value（key能够自定义）的对象。

const module1Reducer = combineReducers(
        module1_key1: module1_reducer1
    );
    const rootReducer = combineReducers(
        key1: reducer1,
        module1: module1Reducer
    );
    
    const store = createStore(rootReducer);
    
    // store中保存的state结构以下
    {
        key1: reducer1(state.key1, action),
        module1: {
            module1_key1: (state.module1.module1_key1, action)
        }
    }

总结一下，state对象的结构由传入的多个reducer的key决定，能够根据模块拆分的细粒度，考虑是否须要嵌套使用combineReducers，整个应用的数据大体分来两类：普通data和ui状态

+ data
        - 服务器响应的数据
        - 缓存数据
        - 本地还没有持久化到服务器的数据
        - 用户输入
        - ...
    + ui状态
        - 激活的路由
        - 被选中的Tab标签
        - 是否显示加载动画
        - 分页器状态
        - ...

设计state结构时，尽可能把state范式化，不要存在嵌套不一样类型的对象的状况。把数据放到一个对象（列表）中，每一个数据用id做为主键。不一样类型的对象经过id引用数据，这样数据发生改变的时候，只须要修改一处地方，减小数据冗余或者混用。

applyMiddleware(...middlewares)

首先要介绍一下什么是middlewares，middlewares用于包装store.dispatch，扩展其功能，在发起action以后，到达reducer以前执行一些逻辑，有点相似是aop的一种实现。
applyMiddleware大体实现:

• 暂存redux store提供的dispatch

• 把dispatch做为实参，传给middleware执行以后返回的函数A

• 执行函数A，返回包装过的dispatch，覆盖原来的store.dispatch

function applyMiddleware(store, middlewares) {
        middlewares = middlewares.slice()
        middlewares.reverse()
        // 暂存dispatch
        let dispatch = store.dispatch
        // 包装dispatch
        middlewares.forEach(middleware =>
            dispatch = middleware(store)(dispatch)
        )
        return {...store, { dispatch })
    }

理解了applyMiddleware的逻辑，自定义一个middleware大体以下

function(store){
        // pass store.dispatch to next 
        return function(next){
            // return dispatch
            return function(action){
                // implement middleware logic
            }
        }
    }

bindActionCreators(actionCreators, dispatch)

• 参数actionCreators若是为函数 把 action creators 转成拥有同名keys的对象，但使用 dispatch 把每一个action creator包围起来，返回新的对象

• 参数actionCreators若是为对象，若actionCreators[key]为函数，用dispatch把每一个 actionCreators[key]包围起来，返回新的对象

compose(...functions)

组合store enhance，applyMiddleware 和 redux-devtools就是store enhance

---

React-redux桥接

Redux自己只提供应用状态和数据流管理，除了和React一块儿用外，还支持其它界面库，且没有任何依赖。要在React的项目中使用Redux，比较好的方式是借助react-redux这个库来作链接.

provider

为整个应用提供store数据，作的事情是把store做为props传递到每个被connet()包装的组件

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

connect(...args)(component)返回一个与Redux store链接的组件类，下面简单讲解一下connect方法的参数

mapStateToProps(state, [ownProps]) [Function]

• state是store中整个应用的state

• ownProps高阶函数包装过的组件的props

• 该回调函数必须返回一个纯对象，这个对象会与被包装的组件的props作merge合并

• mapStateToProps能够作一些数据的format， filter，compose操做，保证数据在组件层面的方便使用

mapDispatchToProps(dispatch, [ownProps]) [Object or Function]

• mapDispatchToProps参数为Object, 每一个定义在该对象的函数都将被看成Redux action creator,其中所定义的方法名将做为属性名，合并到被包装的组件的props中，实现的效果：执行component.prop.checkout()其实是dispatch了一个action，这样作的好处是component与redux的解耦，component根本不知道redux的存在。

// action creator返回对象 
    mapDispatchToProps = {
        // action creator
        checkout: function actionCreator(productId){
            return {
                    type: types.ADD_TO_CART,
                    productId
              }    
        }
    }
    // action creator返回函数，thunk
    mapDispatchToProps = {
        // action creator
        checkout: function actionCreator(productId){
            action creator 返回一个thunk， thunk的参数为 dispatch 和 getState
            return (dispatch, getState) => {
                  
                if (getState().products.byId[productId].inventory > 0) {
  
                         dispatch(addToCartUnsafe(productId))
                  
                }
            
            }
        }
    }

    // 最终被绑定的组件props
    component.props.checkout = function () {
        return dispatch(actionCreator.apply(undefined, arguments));
      }

• mapDispatchToProps参数为Function

mapDispatchToProps(dispatch, [ownProps]) = function(){
        return {
            checkout: () => {
                  
                dispatch(actionCreator())
        
            }
        }
    }        
    // 最终被绑定的组件.props
    component.props.checkout = function () {
            return dispatch(actionCreator.apply(undefined, arguments));
      }

    // 使用bindActionCreators
    mapDispatchToProps(dispatch, [ownProps]) = function(){
        return bindActionCreators(actionCreator, dispatch)
    }
    // 最终被绑定的组件props
    component.props.actionCreator = function () {
        return dispatch(actionCreator.apply(undefined, arguments));
      }

    // 使用 bindActionCreators
    mapDispatchToProps(dispatch, [ownProps]) = function(){
        return bindActionCreators({
            ‘checkout’: actionCreator
        }, dispatch)
    }
    // 最终被绑定的组件props
    component.props.checkout = function () {
                return dispatch(actionCreator.apply(undefined, arguments));
      }

---

使用redux以后应用的数据流向

dispatch(actionCreator) => Reducer => (state, action) => state

• 用户操做或者网络请求 store.dispatch(action)

• redux store调用传入的rootReducer

• redux 执行所有的reducer，把每一个reducer执行获得的结果输出合成一个新的对象

• store 存储rootReducer返回的值，更新currentState