ReactJS 本地与全局状态并在以后实现 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。

另外两个想法。首先，我最近与人合着了一篇讨论why you might want to use Redux in a React application 的文章。

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

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

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