image.png

redux是什么？

A Predictable State Container for JS Apps
JS应用程序的可预测状态容器

redux使用

redux包含API如下：
image.png

createStore和combineReducers

使用Redux.createStore(reducers, initState, enhancer)生成一个store对象
1、第一个入参是一个reducers函数，我们可以通过使用Redux.combineReducers将多个reducers合并成一个大的reduer对象
2、第二个入参是初始化的state，如果使用了combineReducers，那么必须传入一个和reducers结构一样的对象类型
3、第3个入参就是 中间件

  1. const rereducer1 = (state = 0, action) => {
  2.   switch(action.type) {
  3.     case 'A': return 'a';break;
  4.     case 'B': return 'b';break;
  5.   }
  6. }
  7. const rereducer2 = (state = 0, action) => {
  8.   switch(action.type) {
  9.     case 'A1': return 'a1';break;
  10.     case 'B1': return 'b1';break;
  11.   }
  12. }
  13. const reducers = {
  14.     reducer1,
  15.   rereducer2,
  16. }
  17. var store = Redux.createStore(Redux.combineReducers(reducers))
  19. /**
  20. *看看store对象里面有哪些属性
  21. */
  22. {
  23.     dispatch: dispatch,
  24.     subscribe: subscribe,
  25.     getState: getState,
  26.     replaceReducer: replaceReducer
  27.   }

applyMiddleware

该API做的一件事情，就是把dispatch做了一个加强，替换了redux自己生成的dispatch函数，什么叫做加强版本呢，就是在原来的dispatch函数的基础上，外面加了一层中间价的机制。
没有加中间件之前的执行顺序是 dispatch(action) -> 监听函数
加了中间件之后的执行顺序是 dispatch(action),此时的dispatch函数和上面的dispatch函数不是同一个，现在的dispatch函数是加载的一个中间价函数的句柄。middlewara1 -> middlewara2 -> dispatch(action)【这个dispatch函数和上面的一致】-> 监听函数 -> middlewara2 -> middlewara1

  1. function createStore(reducer, preloadedState, enhancer) {
  2.   return enhancer(createStore)(reducer, preloadedState); 这里的enhancer就是我们的applyMiddleware函数
  3. }
  5. export default function applyMiddleware(...middlewares) {
  6.   return createStore => (...args) => {
  7.     const store = createStore(...args)
  8.     let dispatch = () => {
  9.       throw new Error(
  10.         'Dispatching while constructing your middleware is not allowed. ' +
  11.           'Other middleware would not be applied to this dispatch.'
  12.       )
  13.     }
  15.     const middlewareAPI = {
  16.       getState: store.getState,
  17.       dispatch: (...args) => dispatch(...args)
  18.     }
  19.     const chain = middlewares.map(middleware => middleware(middlewareAPI))
  20.     dispatch = compose(...chain)(store.dispatch)
  21.     return {
  22.       ...store,
  23.       dispatch
  24.     }
  25.   }
  26. }

image.png

store对象

image.png

store.subscibe(listener)

  1. store.subscribe(function() {
  2.     console.log(store.getState())
  3. })

  • 添加监听函数，每次dispatch之后都会执行订阅的函数

    store.dispatch(action)

    1. function dispatch(action) {
    2.   if (!isPlainObject(action)) {
    3.     throw new Error('Actions must be plain objects. ' + 'Use custom middleware for async actions.');
    4.   }
    6.   if (typeof action.type === 'undefined') {
    7.     throw new Error('Actions may not have an undefined "type" property. ' + 'Have you misspelled a constant?');
    8.   }
    10.   if (isDispatching) {
    11.     throw new Error('Reducers may not dispatch actions.');
    12.   }
    14.   try {
    15.     isDispatching = true;
    16.     currentState = currentReducer(currentState, action);
    17.   } finally {
    18.     isDispatching = false;
    19.   }
    21.   var listeners = currentListeners = nextListeners;
    23.   for (var i = 0; i < listeners.length; i++) {
    24.     var listener = listeners[i];
    25.     listener();
    26.   }
    28.   return action;
    29. }

  • action必须是一个纯对象，否则会报错

  • 第16行会去执行currentReducer【createStore的时候传的reducers函数】函数来生成一个新的state，故redux中改变state的是通过reducer来改变的
  • listeners 就是我们通过store.subscibe(listener) 来订阅的监听函数，每次dispatch之后都会去调用一次

社区资料

redux小书
若川笔记