我应该何时将Redux添加到React应用程序？

Question

我目前正在学习React,我正在尝试弄清楚如何将它与Redux一起用于构建移动应用程序.我对两者如何相关/可用在一起感到困惑.例如,我在React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript中完成了本教程,但现在我想要为该应用程序添加一些reducers/actions以及我不确定那些与我已经做过的事情有什么关系.

Answer 1

React是一个UI框架,负责更新UI以响应"真实来源",这通常被描述为某个组件"拥有"的状态.React的思考很好地描述了React的国家所有权概念,我强烈建议你仔细阅读.

当状态是分层的并且或多或少地匹配组件结构时,这种状态所有权模型很有效.通过这种方式,状态可以跨越许多组件"展开",并且应用程序易于理解.

但是,有时应用程序的远程部分需要访问相同的状态,例如,如果您缓存提取的数据并希望同时在任何地方一致地更新它.在这种情况下,如果你遵循React模型,你最终会在组件树的顶部放置一堆非常大的组件,这些组件通过一些不使用它们的中间组件传递无数的支持,只是为了达到一些实际关心该数据的叶子组件.

当您发现自己处于这种情况时,您可以(但不必)使用Redux将此状态管理逻辑从顶级组件"提取"到称为"reducers"的单独函数中,并"连接"叶子组件直接关注该状态,而不是通过整个应用程序传递道具.如果您还没有遇到此问题,则可能不需要Redux.

最后,请注意Redux不是解决此问题的最终解决方案.还有许多其他方法可以在React组件之外管理您的本地状态 - 例如,一些不喜欢Redux的人对MobX感到满意.我建议你先了解React状态模型,然后独立评估不同的解决方案,并用它们构建小应用程序,以了解它们的优点和缺点.

(这个答案的灵感来自Pete Hunt的反应指南,我建议你也阅读它.)

Answer 2

我发现,添加到Redux的应用程序/堆栈理想的路径是要等到之后你/应用/团队的感觉,它解决了痛苦.一旦你开始看到长链props建立并通过多个组件级别传递,或者你发现自己编排复杂的状态操作/读取,这可能表明你的应用程序可能会从引入Redux等人的方面受益.

我建议您使用"只需React"构建一个已经构建的应用程序,并查看Redux如何适应它.看看你是否可以通过一次拔出一个状态或一组"动作"来优雅地介绍它.重构它,而不是被大量重写你的应用程序.如果您仍然无法确定它可能会增加价值的位置,那么这可能表明您的应用程序要么不大也不够复杂,无法在React之上获得类似Redux的功能.

如果你还没有遇到它,Dan(上面回答)有一个很棒的短视频系列,它在更基础的层面上穿过Redux.我强烈建议花一些时间来吸收它的一部分:https://egghead.io/series/getting-started-with-redux

Redux也有一些非常好的文档.特别是解释了许多"为什么",例如http://redux.js.org/docs/introduction/ThreePrinciples.html

Answer 3

我准备了这份文档来了解 Redux。希望这可以消除您的疑虑。

-------------------------- REDUX 教程 ---------------

操作 - 操作是将数据从您的应用程序发送到商店的信息负载。它们是来自商店的唯一信息来源。您只能使用 store.dispatch() 发送它们。

   Example-
const  ADD_TODO = 'ADD_TODO'

{
   type:ADD_TODO,
   text: 'Build my first redux app'
}

动作是普通的 javascript 对象。Action 必须有一个 [ type ] 属性来指示正在执行的操作的类型。该类型应定义为字符串常量。

ACTION CREAToRS----- ---------------- ---- 动作创建者正是创建动作的函数 很容易混淆术语 - 动作和动作创建者。在 redux action 中，creator 返回一个 action。

function addToDo(text) {
   return {
    type: ADD_TODO,
    text    
   }
}

初始化 dispatch 将结果传递给 dispatch() 函数。

1. dispatch(addToDo(text));
2. dispatch(completeToDo(index))

或者，您可以创建一个自动调度的绑定动作创建者。

cosnt boundAddTodO = text => dispatch(addToDo(text));

现在你可以直接调用它

boundaddTodO(text);

dispatch() 函数可以直接从 store.dispatch() 访问。但我们使用辅助 connect() 方法访问它。

动作.js........................

行动…………

exports cosnt ADD_TODO = 'ADD_TODO';
exports cosnt TOGGLE_TODO = 'TOGGLE_TODO'

动作创作者

导出函数 addToDO(text){ return { type: ADD_TODO, text } }

......................减速器...................... .....

Reducers 指定应用程序状态如何响应发送到存储的操作而发生变化。

设计状态

在 redux 中，所有应用程序状态都存储在单个对象中。您必须存储一些数据以及一些状态。

{visibilityFilter: 'SHOW_ALL', todos: [ { text: 'Consider using redux', completed: true }, { text: 'Kepp 所有状态在单树中' } ] }

处理动作 ---------------- 减速器是纯函数，它们采用先前的状态和动作，并返回一个新状态。

(previousState, action) => newState

我们将从指定初始状态开始。Redux 将第一次以未定义的状态调用我们的减速器。这是我们返回应用程序状态的机会。

import  { visiblilityFilters } from './actions';
const initialState = {
    visibilityFilter: VisibilityFilters.SHOW_ALL,
    todo: []
}

function todoApp(state, action){
    if(typeof state == 'undefined'){
        return initialState;
    }

    // dont handle other cases as of now.
    return state;
}

你可以使用 ES6 处理 JS 的方式做同样的事情

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

................................. 店铺................ ……………………

商店是将它们聚集在一起的对象。本店有以下责任

1. 保持应用程序状态
2. 允许通过 getState() 访问状态
3. 允许通过 dispatch() 更新状态
4. 通过订阅者（听众）注册听众

笔记。使用 combineReducers() 将多个减速器合二为一。

const store = createStore(todoapp); // todoapp 是reducer