美文网首页
Flutter与React中的Redux

Flutter与React中的Redux

作者: pj0579 | 来源:发表于2018-07-10 09:36 被阅读0次

一、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

相关文章

  • Flutter redux 使用与理解

    Flutter 状态管理redux 方案理解与实践 redux 数据管理方式来自 react ,React 的数据...

  • Flutter与React中的Redux

    一、Redux的三个原则 遵循单一数据源的原则,只存在一个 Store。 State 是只读的,只可以由 disp...

  • redux

    单独使用redux redux是核心库 与react配合使用redux 安装react-redux react-r...

  • Redux简介

    Redux React-redux React-router Redux 1、基本用法: Redux中存在几个概念...

  • redux基础

    Redux react-redux React-router Redux 1、基本用法: Redux中存在几个概念...

  • #React-Redux

    React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取...

  • React-redux概念学习

    React-redux 概述 react-redux 能够使你的React组件从React store中很方便的读...

  • react-redux性能优化之reselect

    在React-redux深入理解中,我们知道了 react-redux 是如何将 React 和 Redux 进行...

  • 2018-01-09

    Immutable Updates in React and Redux React和Redux中的不可变更新 H...

  • 2、Redux与它的中间件:redux-thunk,redux-

    序言 这里要讲的就是一个Redux在React中的应用问题,讲一讲Redux,react-redux,redux-...

网友评论

      本文标题:Flutter与React中的Redux

      本文链接:https://www.haomeiwen.com/subject/klaxpftx.html