redux study

redux 设计优良，且易上手。

已经用Redux做了2个项目了，写点文档记录一些内容，方便之后回顾。

简单使用

1. Action

   • 把所有能影响到 View 的动作，写成 Action 的形式。
   • 比如 Button 的Click， 鼠标的 Hover， 键盘的 Enter, 滚动， 倒计时，甚至拖动 等等等等

   let button1ClickAction = {
       type: 'button1_click',
       data1: {}
       data2: []
       data3: true
   }

2. Reducer

   • 接受当前应用的 State 和被触发的 Action ，并返回新的 State 。
   • 纯函数，相同的输入一定会返回相同的输出。

   let button1Reducer => ( state = {}, action ){
       if ( action.type === 'button1_click'){
           return {
               ...state,
               data: action.data
           }
       }
       return state;
   }

3. CombineReducers

   • 按照业务模块拆分多个 Reducer ，提高代码可读性、可维护性。
   • Redux 帮我合并，所以为什么不拆分呢？

   import { createStore, combineReducers } from 'Redux'
   var reducer = combineReducers({
       root: rootReducer,
       user: userReducer
   })
   var appStore = createStore(reducer)

4. CreateStore

   • 创建 Redux 实例 - 整个应用的唯一的 Store 。
   • 绑定 Reducer 到 整个应用唯一的 Store 上。
   • 在 Dispatch 的时候，redux 会保证去触发全部的 Reducers 。

   import { createStore } from 'redux';
   var appStore = createStore{ combinedReducers };

5. Dispatch

   • “dispatch” 函数本质上是 Redux 的实例属性。
   • 会将 action 传递给每一个 reducer 。

   appStore.dispatch({
       type:'AN_ACTION'
   })

6. DispathcAsync

   • 分发操作是即时的??，所以异步只能从异步 ActionCreater 下手了

   var asyncSayActionCreator_1 = function (message) {
       return function (dispatch) {
           setTimeout(function () {
               dispatch({
                   type: 'SAY',
                   message
               })
           }, 2000)
       }
   }

7. Middleware

   • 纯函数
   • 有严格的使用方法
   • 编码遵循以下格式

   var anyMiddleware = function({ dispatch, getState }) {
       return function (next) {
           return function (action) {
               // 你的中间件业务相关代码
   
           }
       }
   }

   • 注册中间件

   import { createStore, combineReducers, applyMiddleware } from 'Redux'
   const AppCreateStore = applyMiddleware(thunkMiddleware, middleware1, middleware2 )(createStore)
   const reducer = combineReducers({ ... })
   const appStore = AppCreateStore(reducer)
   
   // OR
   
   cosnt appStore = createStore(
       rootReducer,
       applyMiddleware(thunk, middleware1, middleware2 )
   )

   • 为异步 action create 提供的中间件叫 thunk middleware
   • 代码在 https://github.com/gaearon/redux-thunk

   var thunkMiddleware = function ({ dispatch, getState }) {
       // console.log('Enter thunkMiddleware');
       return function(next) {
           // console.log('Function "next" provided:', next);
           return function (action) {
               // console.log('Handling action:', action);
               return typeof action === 'function' ?
                   action(dispatch, getState) :
                   next(action)
           }
       }
   }
   
   // "curry" may come any functional programming library (lodash, ramda, etc.)
   var thunkMiddleware = curry(
       ({dispatch, getState}, next, action) => (
           // 你的中间件业务相关代码
       )
   );

深入剖析

1. 高度抽象

2. 高阶组件

3. 高级扩展