javascript - 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。让我们尝试尽可能多地只使用本地状态。到时候，我们需要某些东西的全局状态，只为那个东西实现它，而不是应用程序中的每个 Action 。这有意义吗？

所以我想我的问题是:如果我们使用本地状态和基本 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 的容器应该相对简单。参见 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 的文章.

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

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

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