Flutter与React中的Redux

一、Redux的三个原则

• 遵循单一数据源的原则，只存在一个 Store。
• State 是只读的，只可以由 dispatch改变。
• 使用纯函数来执行修改,reducer是一个存函数。
  （这三点在Flutter和React里面是一致的）
  放个图,来源https://www.cnblogs.com/shuiyi/p/5081250.html
  image.png

二、Flutter和React中Redux的异同点。

• 数据都是从上到下传递，React采用Context传递，Flutter采用InheritedWidget 传递。
• action 用来判断执行reducer的方法，React 中action是一个包含 type属性的js对象,Flutter中直接以类名作为判断。
• React中的combineReducers是通过遍历小的reducer执行合成一个大的Store。

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

Flutter中的combineReducers也是通过类似的思想传入特定的action迭代完成。

Reducer<State> combineReducers<State>(Iterable<Reducer<State>> reducers) {
  return (State state, dynamic action) {
    for (final reducer in reducers) {
      state = reducer(state, action);
    }
    return state;
  };
}

三、react-redux和flutter_redux的异同

• react-redux通过connect返回和Store连接的组件,它会订阅dispatch事件，每次dispatch后会执行状态判断更新状态。
• flutter_redux通过StoreConnector返回和Store连接的组件,它也会通过StreamController监听dispatch事件，每次dispatch后会执行状态判断更新状态。

四、中间件 react-thunk和flutter_thunk也是类似的思想,判断Action还是Function执行对应的逻辑。

五、具体参考demo ，https://github.com/xrigau/todo_demo_flutter_redux