redux相关

Posted 2021-12-16 gushixianqiancheng

一、redux要解决的问题
React是DOM的一个抽象层、单向数据流，解决视图层，但它没涉及：代码结构、(无层级关系的)组件之间的通信。有层级关系的组件通信容易解决，然而当发生状态共享或一个组件需要改变另一个与之无层级关系的组件的状态时，不使用 Redux 等状态管理工具，代码会乱。用Redux可以很有条理地查询和改变状态。

二、Redux的三大原则和数据流的管理：
来源https://www.cnblogs.com/rudylemon/p/redux.html
Redux三大原则：
1、单一数据源，
2、state是只读的，
3、纯函数修改state，
Redux数据流的管理：
1、action:携带新数据。
2、reducer:改变旧数据。
3、Store:把action和reducer联系到一起，负责维持、获取和更新state。
4、生命周期：
调用Store.dispatch(action)->reducer执行->state改变->state树改变。

附、Redux主要代码
```javascript
createStore(
rootReducer,
preloadedState,
compose(
applyMiddleware(thunkMiddleware),
DevTools.instrument()
)/*这是增强函数*/
);
function createStore(reducer, preloadedState, enhancer)
enhancer(createStore)(reducer, preloadedState);
function getState()
function subscribe(listener)
function dispatch(action)
dispatch( type: ActionTypes.INIT );
return

function combineReducers(reducers)
finalReducers[key] = reducers[key];
return function combination()
var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ;
var action = arguments[1];
nextStateForKey = reducer(previousStateForKey, action)
var hasChanged = false;
return hasChanged ? nextState : state;
;

function compose()
for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++)
funcs[_key] = arguments[_key];

return funcs.reduce(function (a, b) /*a为compose的第1个参数，b为compose的第2个参数，*/
return function () /*返回值为增强函数*/
return a(b.apply(undefined, arguments));
;
);

function applyMiddleware()
/*中间件（middleware）让Reducer在异步操作结束后自动执行*/
/*applyMiddleware将所有中间件组成一个数组，依次执行*/
/*同步操作只要发出一种 Action 即可，异步操作的差别是它要发出三种 Action。*/
for (var _len = arguments.length, middlewares = Array(_len), _key = 0; _key < _len; _key++)
middlewares[_key] = arguments[_key];

return function (createStore) /*返回值为compose的第1个参数*/
return function (reducer, preloadedState, enhancer)
var store = createStore(reducer, preloadedState, enhancer);
var _dispatch = store.dispatch;
var chain = [];
return _extends(, store,
dispatch: _dispatch
);
;
;

```