Redux api用法和原理

这是刚接触Redux时整理的一份笔记，现在我们使用mobx替代了Redux，对于Redux就没有继续深入下去。如果本文有什么错漏，欢迎大家在评论区交流、斧正。

Redux的api有5个：

createStore
combineReducers
applyMiddleware
bindActionCreators
compose

createStore(reducer, preloadedState, enhancer);

该方法返回store对象用于存放state。原则上每个应用在应该只有一个store。

方法接受三个参数:

reducer 是唯一必传的参数。

一个处理state的funtcion，方法应该总是返回一个新的更新后的state，而不是直接去修改原始的 state；

示例：


const reducer = (state = [], action) => {

  let result = Object.assign({}, state);

  switch (action.type) {

    case 'add':

      result = result.concat(action.payload);

      break;

    default:

      break;

  }

  return result;

};

const store = createStore(reducer);

preloadedState 可选，state的初始值。

使用combineReducers时，preloadedState应该是个object。

当与enhancer一起使用，需要在enhancer中处理preloadedState。

源码展示：


  if (typeof enhancer !== 'undefined') {

    if (typeof enhancer !== 'function') {

      throw new Error('Expected the enhancer to be a function.');

    }

    return enhancer(createStore)(reducer, preloadedState);

  }

一般建议在reducer中初始化reducer。通常情况下，通过 preloadedState 指定的 state 要优先于通过 reducer 指定 state。


const reducer = (state = [], action) => {

  let result = state;

  switch (action.type) {

    case 'add':

      result = [...result, ...action.payload];

      break;

    default:

      break;

  }

  return result;

};

const enhancer = (...a) => {

  return (createStore) => {

    return (reducer, preloadedState) => {

      const store = createStore(reducer, preloadedState);

      const dispatch = store.dispatch;

      const getState = store.getState;

      store.dispatch = (action) => {

        console.log('dispatch', action);

        dispatch(action);

      };

      store.getState = () => {

        console.log('getState');

        return getState();

      };

      return store;

    };

  };

};

const store1 = createStore(reducer, {});

store1.getState(); // {}

const store2 = createStore(reducer, {}, enhancer());

store2.getState(); // {}

enhancer：可选，一个function，通过复合函数改变 store 接口，与middleware写法相似。方法返回的是store。

使用方法


// 代码接preloadedState的示例

store2.dispatch({

  type: 'add',

  payload: [1]

});

// logger add

combineReducers(reducers);

把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数。由 combineReducers() 返回的 state 对象，会将传入的每个 reducer 返回的 state 按其传递给 combineReducers() 时对应的 key 进行命名。

Redux只能存在一个store，所以多个store需要通过combineReducers合并reducer。

源码展示：


function combineReducers(reducers) {

  var reducerKeys = Object.keys(reducers);

  var finalReducers = {};

  for (var i = 0; i < reducerKeys.length; i++) {

    var key = reducerKeys[i];

    if (process.env.NODE_ENV !== 'production') {

      if (typeof reducers[key] === 'undefined') {

        (0, _warning2['default'])('No reducer provided for key "' + key + '"');

      }

    }

    if (typeof reducers[key] === 'function') {

      finalReducers[key] = reducers[key];

    }

  }

combineReducers 会剔除所有值为undefined 和不为function类型的reducer，并试执行所有剩余reducer，验证是reducer是否有报错，否永远返回state。

但该错误不会立即提示，而是在将错误reducer传入createStore时才会提示

使用reducer时要避免出现同名action，多个同名action会同时生效。因为 combineReducer 生成的 reducer 会遍历所有 reducer，并返回 state.


  var hasChanged = false;

  var nextState = {};

  for (var _i = 0; _i < finalReducerKeys.length; _i++) {

    var _key = finalReducerKeys[_i];

    var reducer = finalReducers[_key];

    var previousStateForKey = state[_key];

    var nextStateForKey = reducer(previousStateForKey, action);

    if (typeof nextStateForKey === 'undefined') {

      var errorMessage = getUndefinedStateErrorMessage(_key, action);

      throw new Error(errorMessage);

    }

    nextState[_key] = nextStateForKey;

    hasChanged = hasChanged || nextStateForKey !== previousStateForKey;

  }

  return hasChanged ? nextState : state;

  };

使用示例：


const teacher = (state = [], action) => {

  let result = state;

  switch (action.type) {

    case 'add':

      result = [...result, ...action.payload];

      break;

  }

  return result;

};

const student = (state = [], action) => {

  let result = state;

  switch (action.type) {

    case 'add':

      result = [...result, ...action.payload];

      break;

  }

  return result;

};

const reducer = combineReducers({ teacher, student });

const store = createStore(reducer, {});

store.getState();

/*

  {

    student: [],

    teacher: []

  }

*/

store2.dispatch({

  type: 'add',

  payload: [1,2]

});

/*

  {

    student: [1, 2],

    teacher: [1, 2]

  }

*/

applyMiddleware(middlwares)

createStore时作为enhancer传入，相当于弱化版的enhancer，通过包装 dispatch 方法改变默认动作，它只能改变 dispatch。

中间件接收store的 dispatch 和 getState作为参数。

多个middleware调用顺序左 -> 右。


const teacher = (state = [1, 2, 3, 4, 5], action) => {

  let result = [...state];

  switch (action.type) {

    case 'add':

      result = [...result, ...action.payload];

      break;

    case 'shift':

      result.shift();

      break;

  }

  return result;

};

const middleWare1 = ({ dispatch, getState }) => { // store的api dispatch、getState、replaceReducer、subscribe

  return (next) => {

    return (action) => {

      console.log('will dispatch', action);

      // 调用 middleware 链中下一个 middleware 的 dispatch。

      let returnValue = next(action); // 一般会是 action 本身，除非后面的 middleware 修改了它。

      console.log('state after dispatch', getState());

      return returnValue;

    };

  };

};

const middleWare2 = ({ dispatch, getState }) => {

  return (next) => {

    return (action) => {

      action.type = 'shift';

      console.log('will dispatch', action);

      // 调用 middleware 链中下一个 middleware 的 dispatch。

      let returnValue = next(action); // 一般会是 action 本身，除非后面的 middleware 修改了它。

      console.log('state after dispatch', getState());

      return returnValue;

    };

  };

};

const store = createStore(teacher, applyMiddleware(middleWare1, middleWare2));

store2.dispatch({

  type: 'add',

  payload: [1]

});

// will dispatch {type: "add", payload: Array(1)}

// will dispatch {type: "shfit", payload: Array(1)}

// state after dispatch (4) [2, 3, 4, 5]

// state after dispatch (4) [2, 3, 4, 5]

compose(function)

从右到左来组合多个函数作为enhancer传入createStore，调用时会以从左至右的顺序执行。

未传入function时，返回一个执行结果返回store的function

传入一个function是，返回这个function

传入多个function时，返回一个将传入的 function 从右到左包装的函数。

源码展示：


function compose() {

  for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) {

    funcs[_key] = arguments[_key];

  }

  if (funcs.length === 0) {

    return function (arg) {

      return arg;

    };

  }

  if (funcs.length === 1) {

    return funcs[0];

  }

  return funcs.reduce(function (a, b) {

    return function () {

      return a(b.apply(undefined, arguments));

    };

  });

}


const teacher = (state = [1, 2, 3, 4, 5], action) => {

  let result = [...state];

  switch (action.type) {

    case 'add':

      result = [...result, ...action.payload];

      break;

    case 'shift':

      result.shift();

      break;

  }

  return result;

};

const middleWare1 = ({dispatch, getState }) => { // store的api dispatch、getState、replaceReducer、subscribe

  return (next) => {

    return (action) => {

      console.log('will dispatch', action);

      // 调用 middleware 链中下一个 middleware 的 dispatch。

      let returnValue = next(action); // 一般会是 action 本身，除非后面的 middleware 修改了它。

      console.log('state after dispatch', getState());

      return returnValue;

    };

  };

};

const enhancer = () => {

  return (next) => {

    return (action) => {

      const store = next(action);

      const dispatch = store.dispatch;

      store.dispatch = (action) => {

        console.log('logger', action.type);

        dispatch(action);

      };

      return store;

    };

  };

};

const store = createStore(teacher, compose(applyMiddleware(middleWare1), logger()));

store2.dispatch({

  type: 'add',

  payload: [1]

});

// will dispatch {type: "add", payload: Array(1)}

// logger add

// state after dispatch {student: Array(1), teacher: Array(6)}

bindActionCreators(action, dispatch)

组件可以在props中隐式调用dispatch


// root.jsx

import store from './store.js';

const action = {

  add (data) {

    return {

      type: 'add',

      payload: data

    };

  }

};

const custom = bindActionCreators(action, store.dispatch);

render(

  <Provider store={store}>

    <Page {...custom}/>

  </Provider>,

  document.getElementById('app')

);

// Page.jsx

this.props.add(['a']);

// will dispatch {type: "add", payload: ["a"]}

// logger add

// state after dispatch (6) [1, 2, 3, 4, 5, "a"]

源码展示：


function bindActionCreator(actionCreator, dispatch) {

  return function () {

    return dispatch(actionCreator.apply(undefined, arguments));

  };

}

代码会返回一个被包装的 dispatch 方法，当在页面调用 this.props.add时，Redux 会把 add 返回的 action 传给 store.dispatch 方法，实现隐式调用的效果。