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的方法,Reactaction是一个包含 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-reduxflutter_redux的异同

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容