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

Question

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

我理解：redux 有助于管理全局状态。 但这是否意味着所有按钮都应该映射到全局“动作”？ 这似乎造成了分散在整个应用程序中的整个对象。 我一直在问自己，当本地状态可以用于 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>;
});

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

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

Answer 1

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

使用本地组件状态很好。 作为开发人员，您的工作是确定构成您的应用程序的状态类型以及每个状态的位置。 找到一个适合你的平衡点，然后坚持下去。

确定应该将哪种数据放入 Redux 的一些常见经验法则：

• 应用程序的其他部分是否关心这些数据？
• 您是否需要能够基于这些原始数据创建进一步的派生数据？
• 是否使用相同的数据来驱动多个组件？ 能够将这种状态恢复到给定的时间点（即时间旅行调试）对您是否有价值？
• 您是否要缓存数据（即，如果它已经存在，则使用它的状态而不是重新请求它）？

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

另外两个想法。 首先，我最近与人合着了一篇文章，讨论了为什么您可能想要在 React 应用程序中使用 Redux 。

第二：是的，那个代码看起来有点丑。 我希望这些至少是来自代码库不同部分的三个不同的片段，而不是一个片段，但这很难阅读。 重复使用“sub_items”和“subitems”似乎有点危险，在可读性方面。

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

总体而言：绝对欢迎您根据需要使用尽可能多或尽可能少的 Redux，以及尽可能多或尽可能少的本地组件状态。 不过，我认为更大的问题是您的团队对 Redux 的实际了解程度，以及他们如何尝试使用它。