React 数据管理 - Redux

redux - 5.0.0

总结：

• 通过 subscribe 添加订阅
• dispatch 更改值 和 通知订阅
• 通过第二个参数 或者 第三个参数传递初始值 和 中间件函数

使用示例：
import { createStore } from ‘redux’；

function counterReducer(state = { value: 0 }, action) {
switch (action.type) {
case ‘counter/incremented’:
return { value: state.value + 1 }
case ‘counter/decremented’:
return { value: state.value - 1 }
default:
return state
}
}
let store = createStore(counterReducer)
store.subscribe(() => console.log(store.getState()))
store.dispatch({ type: ‘counter/incremented’ }) // {value: 1}
store.dispatch({ type: ‘counter/incremented’ }) // {value: 2}
store.dispatch({ type: ‘counter/decremented’ }) // {value: 1}

1.createStore 方法
createStore 方法接收三个参数（reducer，preloadedState，enhancer）
1.接收参数 （reducer，preloadedState）
reducer赋值给 currentReducer, preloadedState 赋值给 currentSate
调用 diapatch 方法 ( currentReducer(currentSate, action) ) 更新 currentSstate 的值
createStore 返回值为 store 对象


2.接收参数（reducer，preloadedState，enhancer）

1.1diapatch 方法
diapatch 方法接收一个参数 action, 调用 currentReducer 函数，参数为（currentState, action），得到新的 currentState值 ，再调用 subscribe 中注册的回调函数数组 nextListeners，返回传入的action

1.2.subscribe 方法
subscribe 方法将回调函数添加到 nextListeners 数组中，在dispatch方法中执行reducer方法，遍历调用nextListeners 中的回调函数

1.3 getState
createStore 方法通过闭包保存了 currenSate 遍历，调用 getState 方法时返回 currentState 变量

1.4 replaceReducer替换 reducer函数
将参数 nextReducer 赋值给 currentReducer, 调用 dispatch 函数（将 旧 currentState 作为参数传入 currentReducer函数得到新的 currentState）

2.applyMiddleware 方法
使用以下示例分析applyMiddleware的执行逻辑：

1.applyMiddleware()， applyMiddleware接收多个中间件方法，返回一个函数，createStore函数中通过 enhancer(createStore)(reducer, preloadedState) 调用此函数

此函数返回store 对象，实现了一个增强的 dispatch 函数
1.调用 createStore(reducer, preloadState) 生成一个 store 对象
2.遍历执行 middlewares 中 函数，传递 middlewareAPI={ getState, dispatch: ()=>dispatch() } 作为参数
3.compose(…chain), 返回值为函数，函数体为 chain 列表中的函数从右往左执行，右边函数执行的返回值作为左边函数的参数，并返回最后一个函数的执行结果 （args）=> logger1( logger2( logger3( thunk(…args) ) ) )
4.compose(…chain)(store.dispatch) = （ （args）=> logger1( logger2( logger3( thunk(…args) ) ) ) )（store.dispatch) , 根据示例，结果为 logger1() 的返回值，接收的参数为 logger2() 的返回值，以此类推，最后一个函数的参数为传入的 store.dispatch
5.dispatch =compose(…chain)(store.dispatch), 更新 middlewareAPI 中的 dispatch 的值

3.compose方法
数组的 reduce 方法接收两个参数，第一个参数为 callback，第二个参数为 初始值

1. 有初始值时，array.reduce( callback, int ), callback 函数接收的参数为 （init，array[0], 0, array）
2. 无初始值时，arrar.reduce(callback), callback 函数接收的参数为 （array[0]，array[1], 1, array）
   callback的第三个参数为当前第二个参数的下标
   callback 的返回值作为下一轮的第一个参数继续执行

compose（funcs）返回一个函数，函数的函数体为 将函数从右往左执行，右边的函数执行的返回值作为左边函数的参数，compose(funcs)(arg), arg作为最后一个函数的参数，最后一个函数执行的返回值作为倒数第二个函数的返回值

3.combineReducers 方法
combineReducers 方法接收一个 reducer 对象，返回一个函数，通过闭包保存了 finalReducers，finalReducerKeys，传入参数验证格式后赋值给finalReducers


1.const reducer = combineReducers（{todos, counter}:
reducer 的值为 combination 函数
2.let store = createStore(reducer);

currentState 的值为 createStore（） 的参数 preloadedState 的值

调用传入 createStore 的参数 reducer 的值 （ combination 函数 ），combination 函数的参数 state 为createStore（） 的参数 preloadedState 的值，combination() 函数的返回值 nextState 赋值给 CurrentState

3.store.dispatch({ type: ‘ADD_TODO’, text: ‘Use Redux’ })

combination 函数遍历 finalReducers，并执行单个 reducer 函数，state 的值为 {key: value} 的对象，key 为 combineReducers 参数对象的 key，action 不通过 key 区分，action.type 相等时，通过更改各自对象的值

4.bindActionCreators方法
bindActionCreators 函数接收 actionCreators（object或者function），dispatch, 返回值为对象或者函数
bindActionCreator 方法接收 actionCreator ( action函数，返回包含 type 属性的对象 )，dispatch, 返回一个函数

以下示例：

boundActionCreators 为 {addTodo: func, removeTodo: func }
boundActionCreators.addTodo(1111) 实际调用的函数为 dispatch(actionCreator.apply(this, args))，其中 this 为 boundActionCreators ，args 为 1111