Question

我尝试在我的应用程序中使用不同的逻辑部分组织我的reducer（combineReducers）。

实施例

JSESSIONID

但是有一些问题。我建立了一个像社交媒体应用程序（不完全一样）的大而且我只有2个缩减器，如user: ..., app: ..., news: ..., etc.和app，应用程序中的所有逻辑都靠近用户工作（消息，游戏，朋友......）我不知道如何拆分他们。

如果有人有经验并且能为我提供建议，那将是很棒的。感谢。

Answer 1

您可以根据需要组合多个减速器

<强> userReducer.js

export default combineReducers({
  messages, 
  games, 
  friends
});

<强> appReducer.js

export default combineReducers({
  ...otherStaff
});

<强> mainReducer.js

import user from './userReducer';
import app from './appReducer';

export default combineReducers({
  app,
  user
});

但是，保持状态正常化并避免深度嵌套是一种很好的做法

Answer 2

如果您正在询问如何拆分appReducer和userReducer，那么：

//appReducer.js
export default () => {
  ...logic
}

//userReducer.js
export default () => {
  ...logic
}

//your store
import appReducer from './appReducer';
import userReducer from './userReducer';
const store = createStore(combineReducers({ app: appReducer, user: userReducer}));

如果你问如何分割你的userReducer，因为你觉得减速器太大了，那么你必须将它们从userReducer中取出并制作messagesReducer，friendsReducer等等...只是因为你觉得它们' “user”对象的一部分并不意味着你必须将它们全部放在同一个userReducer中。这就是你的动作类型以及flux / redux数据流对你有什么帮助。

Answer 3

我认为，您希望代码可以维护。将新功能添加到代码的特定部分，或者发现导致用户困扰的错误应该很容易。

拆分你的减速器是一个很好的方法。如果您知道如何命名减速器以及究竟是什么类型的逻辑，那么您知道您已经很好地划分了代码。这有助于未来的开发人员在修复错误时轻松找到他们需要修改的文件。

您还没有给我足够的信息来帮助您决定如何拆分它，但这里有一些经验法则。

想一想您的组件。如果映射整个＆＃34;用户＆＃34;意味着显示消息的组件也必须消化＆＃34;朋友＆＃34;在reducer中的属性，那么也许你应该把它分成messageReducer和friendsReducer。这对您有好处，因为对消息的更改不需要影响订阅该减速器的组件以外的任何组件。
想想您的行为。如果1个reducer收听100个动作，那么你的代码将难以理解，因为你已经为你的商店构建了一个耗尽的API。此外，如果您只有一个侦听器来执行1个操作，那么您无法正常执行操作，那么您只需构建一个长命令堆栈。你想要的是几个减速器听同样的动作。例如：一个ajax请求已经完成，这是一个好时机 - 修改列表;将网络进度状态切换为已完成;发送其他分析事件; 3完全独立的行动，对其余部分不在乎。
想想您的ajax - 您的服务器响应是包含大量不同类型数据的大型有效负载，或者是单条信息。拥有＆＃34;朋友＆＃34;减速机处理＆＃34;朋友＆＃34; API很容易理解，比使用＆＃34;用户＆＃34;更容易。 reducer遵循整个服务器API。
考虑您的复杂性。如果用户减速器处理所有动作的5％，其余的只是＆＃34;朋友＆＃34;行动，那么也许你需要将朋友的行动分成＆＃34;建议朋友＆＃34;，＆＃34;添加朋友＆＃34;等。在这里你会听到很多不同的意见 - 我个人宁愿有两个减速器，都要听＃34;添加朋友＆＃34;事件，并且每个人都在做他们的事情（在这个csae中，建议的朋友需要过滤掉添加的朋友和＆＃34;添加＆＃34;需要添加朋友＆＃34;）。这比这些事情发生的长事件处理功能要清晰得多。＆＃34;建议朋友的错误＆＃34;显然是在＃34;建议的朋友减速机＆＃34;。

无论如何，这是我的2美分。祝你好运。

在大应用程序中拆分Reducer

3 个答案: