fi3ework's Studio.

Redux的工作流程教程

2017/10/27 Share

redux的工作流程

  1. 使用createStore创建一个管理数据的store。

    1
    let store = createStore(reducer)

    store的实现:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    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);
    }
    };
    // 在创建store的实例时先执行一次,将reducer的默认参数赋给state
    dispatch({});
    return { getState, dispatch, subscribe };
    };

    store就具有以下功能了:

    • store.subscribe() - 向store设置监听函数,一旦 State 发生变化,就自动执行这个函数。
    • store.getState() - 通过闭包访问的真实的state被隐藏在store中,通过store.getState()来获取State。
    • store.dispatch() - 接受action来改变State,并执行所有监听的函数。
    • store.unsubscribe() - 不再监听对应的函数。
  2. 用户通过UI的触发store的dispatch函数,在这一步中会自动调用createStore中作为参数的reducer

    1
    store.dispath(action)
  3. store会自动调用使用createStore函数时传入的reducer,将action作为参数传给reducer,reducer会返回新的State,并会顺便执行所有监听的函数。

  1. 部分时候在多个组件中存在多个reducer,但是store只有一个,所以需要将所有reducer合并起来变成一个reducer用来createStore给store控制。使用的是combineReducers这个方法。

    实现如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const combineReducers = reducers => {
    return (state = {}, action) => {
    return Object.keys(reducers).reduce(
    (nextState, key) => {
    nextState[key] = reducers[key](state[key], action);
    return nextState;
    },
    {}
    );
    };
    };

    传入一个action会依次执行各个被合并的reducer,最后将各个reducer的结果组合成一个对象输出,各个reducer的键名就是传入的reducers中对应的key。

    最后再用一张阮老师博客中的流程图表示

    redux-process

从redux到react-redux

在react中使用react-redux能够更方便的管理状态。

React-Redux 规定,所有的 UI 组件都由用户提供,容器组件则是由 React-Redux 自动生成。也就是说,用户负责视觉层,状态管理则是全部交给它。

相比redux,react-redux主要多了以下几个方法:

  • connect() - 负责将用户写的UI组件和react-redux自动生成的容器组件连接起来。
  • mapStateToProps() - 将作为react-redux自动生成的容器组件的属性传递给用户创建的UI组件,如果这些属性发生变化,会引起UI组件的重新渲染。如果不给connect传递mapStateToProps,那么Store的更新将不会引起UI组件的更新。
  • mapDispatchToProps() - 用来建立UI组件的参数到store.dispatch方法的映射。
  • <Provider>组件
CATALOG
  1. 1. redux的工作流程
  2. 2. 从redux到react-redux