Redux学习笔记-基本概念和 API

参考：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

Redux用一个单独的常量状态树（State）保存这一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers）。

• 应用场景
  
  • 某个组件的状态，需要共享
  • 某个状态需要在任何地方都可以拿到
  • 一个组件需要改变全局状态
  • 一个组件需要改变另一个组件的状态
•  安装稳定版：
  

  npm install --save redux

• 基本概念和API
  • Store
    

    Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。

    Redux 提供createStore这个函数，用来生成 Store

    import { createStore , applyMiddleware} from 'redux';
    

    import thunk from 'redux-thunk';

    const store = createStore(reducer, window.STATE_FROM_SERVER, applyMiddleware(thunk));

    上面代码中，createStore函数接受一个函数作为参数，返回新生成的 Store 对象。第二个参数，表示 State 的最初状态。这通常是服务器给出的。注意，如果提供了这个参数，它会覆盖 Reducer 函数的默认初始值。第三个参数applyMiddleware，它是 Redux 的原生方法，作用是将所有中间件组成一个数组，依次执行

  • state
    

    Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。

    当前时刻的 State，可以通过store.getState()拿到。

    import { createStore } from 'redux';
    const store = createStore(fn);
    const state = store.getState();

  • actions
    

    State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

    Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置。

    const action = {
      type: 'ADD_TODO',
      payload: 'Learn Redux'
    };

    改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。

  • store.dispatch()
    store.dispatch()是 View 发出 Action 的唯一方法。store.dispatch接受一个 Action 对象作为参数，将它发送出去。
    

    import { createStore } from 'redux';
    const store = createStore(fn);
    
    store.dispatch({
      type: 'ADD_TODO',
      payload: 'Learn Redux'
    });

  • reducer
    

    Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

    Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。
    store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。
    每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State。

    import { createStore } from 'redux';
    const defaultState = 0;
    const reducer = (state = defaultState, action) => {
      switch (action.type) {
        case 'ADD':
          return state + action.payload;
        default: 
          return state;
      }
    };
    const store = createStore(reducer);
    store.dispatch({
      type: 'ADD_TODO',
      payload: 'Learn Redux'
    });

• Store的实现
  
  •  Store 提供了三个方法。
    
    • store.getState()
    • store.dispatch()
    • store.subscribe()
      

      import { createStore } from 'redux';
      let { subscribe, dispatch, getState } = createStore(reducer, window.STATE_FROM_SERVER);

      以下为createStore的简单实现：

      const createStore = (reducer) => {
        let state;
        let listeners = [];
        const getState = () => state;
        const dispatch = (action) => {
          state = reducer(state, action);
          listeners.forEach(listener => listener());
        };
        const subscribe = (listener) => {
          listeners.push(listener);
          return () => {
            listeners = listeners.filter(l => l !== listener);
          }
        };
        dispatch({});
        return { getState, dispatch, subscribe };
      };

• Redux的拆分
  Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。
  

  import {combineReducers} from 'redux';
  export default combineReducers({
      big_data_jobs,
      login,
      user
  });

  以下为combineReducer的简单实现：

  const combineReducers = reducers => {
    return (state = {}, action) => {
      return Object.keys(reducers).reduce(
        (nextState, key) => {
          nextState[key] = reducers[key](state[key], action);
          return nextState;
        },
        {} 
      );
    };
  };

• bindActionCreators
  来将action包装成直接可被调用的函数。
  

  import {bindActionCreators} from 'redux';
  
  const mapDispatchToProps = (dispatch, ownProps) => {
    return bindActionCreators({
      increase: action.increase,
      decrease: action.decrease
    });
  }
  //参考地址： https://segmentfault.com/a/1190000015042646

• Redux工作流程