ReactJS 本地 vs 全局状态和稍后实现 redux

Question

所以我们在一个项目上大约有两个月的时间。这是我第一次管理代码编写者而不是自己编写代码。上周我一直在阅读他们的代码。本来应该是一个简单的 React 应用程序已经变成了意大利面条一团糟。

我明白了：redux 有助于管理全局状态。但这是否意味着所有按钮都应映射到全局 "action?" 这似乎造成了散布在整个应用程序中的整个混乱对象。我一直在问自己，当本地状态可以用于 90% 的应用程序时，为什么我们要对所有内容使用全局状态。这是让我胃灼热的代码：

let subitems = SidebarItems[state.type].sub_items;
Store.dispatch(SidebarSubItemHandler(item.action, subitems[0], null));

if(item.sub_items[subitems[0]].param) {
    browserHistory.push(`${item.sub_items[subitems[0]].path}/${item.sub_items[subitems[0]].param}`);
} else {
    browserHistory.push(item.sub_items[subitems[0]].path);
}

subItembuttons = Object.keys(this.props.subitems.sub_items).map(subitem => {
    let subItem = this.props.subitems.sub_items[subitem];
    return <li className={this.props.activeSubItem.action == subItem.action ? "bottom-bar-item active" : "bottom-bar-item"}
               onClick={e => this.props.onClickSubItem(e, subItem)}
               key={subItem.action} style={this.props.subitems.inlineStyles.mobileSubItemLI}>
        <a href="">{subItem.item}</a>
    </li>;
});

应用程序中充斥着各种映射到 "action" 对象的对象。所以在这一点上我们决定放弃整个项目并从头开始，但没有 redux。让我们尝试尽可能多地只使用本地状态。到时候，我们需要某些东西的全局状态，只为那个东西实现它，而不是应用程序中的每个动作。这有意义吗？

所以我想我的问题是：如果我们使用本地状态和基本 React 开发应用程序，我们是否会产生不可逆转的问题，从而阻止我们在每个项目的基础上实施 redux？

Answer 1

引用 http://redux.js.org/docs/faq/OrganizingState.html#organizing-state-only-redux-state 上的相关 Redux FAQ 条目：

Using local component state is fine. As a developer, it is your job to determine what kinds of state make up your application, and where each piece of state should live. Find a balance that works for you, and go with it.

Some common rules of thumb for determing what kind of data should be put into Redux:

Do other parts of the application care about this data?

Do you need to be able to create further derived data based on this original data?

Is the same data being used to drive multiple components? Is there value to you in being able to restore this state to a given point in time (ie, time travel debugging)?

Do you want to cache the data (ie, use what's in state if it's already there instead of re-requesting it)?

根据您的具体问题：如果您相当一致地使用“容器组件”模式，那么将这些“普通 React”容器换成 Redux-connected 容器应该相对简单。有关“container/presentational 组件”模式的文章，请参阅 https://github.com/markerikson/react-redux-links/blob/master/react-component-patterns.md#component-categories。

另外两个想法。首先，我最近 co-authored 一篇讨论 why you might want to use Redux in a React application 的文章。

其次：是的，该代码看起来有点难看。我希望这些至少是来自代码库不同部分的三个不同片段，而不是一个片段，但这相当难以阅读。重复使用“sub_items”和“subitems”似乎有点危险，readability-wise.

它看起来也不像遵循良好的 Redux 实践。例如，惯用的 Redux 代码几乎从不直接引用商店。相反，对 dispatch 和 getState 的引用可通过中间件获得，因此可以通过 redux-thunk 和 redux-saga 在动作创建器中使用。连接的组件也可以访问 dispatch.

总体而言：绝对欢迎您使用任意数量的 Redux，以及任意数量的本地组件状态。不过，我认为更大的问题是您的团队对 Redux 的实际理解程度，以及他们如何尝试使用它。

ReactJS 本地 vs 全局状态和稍后实现 redux

ReactJS local vs global state and implementing redux at a later time

javascript

single-page-application

reactjs

redux

react-redux