reactjs - 如何使用 redux 实现基于插件的架构

Question

我正在开发一个网络应用程序，用户可以在其中订阅可用的功能，所有这些功能都会对用户操作产生一定的影响。我正在使用 redux thunk 进行异步操作。

例如。用户可以从产品列表中选择要购买或出售的产品，这会触发一个名为 userIntention 的 reducer，然后调用 createProductForm reducer，它会显示产品表单和产品信息。用户可以订阅推荐、最佳交易等功能，这些功能可以修改产品属性的某些参数，如标签、价格。我想以这种方式实现这一点，如果触发 createProductForm，reducer 将动态地从推荐、最佳交易等中收集数据，并根据结果形成用户产品表单。

我们希望让多个开发人员在不与其他人的功能和代码库发生冲突的情况下开发不同的功能。这样当开发一个新功能时，我们没有改变核心逻辑。但这必须在事先不知道为 creatingProductForm 调用哪些 reducer 的情况下发生，它可能没有或有很多功能 reducer。

它就像插件，其中订阅激活了一些 reducer 和中间件。

哪个最适合这种情况:reducer 还是中间件？我试过添加动态中间件、动态 reducer ，但它们都有自己的缺陷。

我尝试过的:

1. 功能订阅后，称为“ENABLE_FEATURE”的操作被调度到其中，功能缩减器可以动态监听注册自己。但是我发现很难维护要调用的 reducer 。有什么办法可以在 redux 商店中保留 reducer 列表。
2. 同样尝试使用中间件，但是动态删除其中一个中间件太复杂了。
3. 在 redux 之外创建我自己的实用程序，其中实现了动态 reducer 的注册和订阅，但是由于分派(dispatch)和存储不可用，因此如何从外部 react 组件调用 reducer。

我们正在使用 rekit studio为了发展。

编辑这是我的应用程序架构。正如您所看到的，所有功能都是相互独立开发的，还有 reducer、store、components。我们需要的是，一旦开发了 f-core 组件，即使我们独立于它实现新功能，它也不会受到影响。有点像注册表，功能可以在其中注册自己，以便 f-core 了解它们的存在。那么这个特性应该已经公开了一些将在运行时决定的函数(reducers)。应用架构

/node_modules
package.json
package-lock.json
/public
/src
 - /common
     - configStore.js
     - history.js
     - rootReducer.js
     - routeConfig.js
 - /features
    - /f-core
        - component1.js
         - component1.less
         - index.js
         - route.js
         - /api-service
             - router.js
             - constants.js
             - service.js
         - /redux
             - actions.js
             - constants.js
             - reducer.js
             - initialState.js
             - reducer1.js
     - /f1
         - component1.js
         - component1.less
         - index.js
         - route.js
         - /api-service
             - router.js
             - constants.js
             - service.js
         - /redux
             - actions.js
             - constants.js
             - reducer.js
             - initialState.js
             - reducer1.js
     - /f2
        - component1.js
            - component1.less
         - index.js
         - route.js
         - /api-service
             - router.js
             - constants.js
             - service.js
         - /redux
             - actions.js
             - constants.js
             - reducer.js
             - initialState.js
             - reducer1.js
 - index.js
 - Root.js

Answer 1

隔离开发可插拔 Redux 子状态的一种方法是 1) 编写每个子状态时外部依赖为零，然后 2) 在主应用程序中，使用 Redux-Saga 编排跨越可插拔子状态边界的 Action 流。

1) 通过仅在其自己的命名空间/目录/插件中引用函数、变量等，编写具有零依赖性的每个子状态。含义:

• 所有相关代码的托管，例如 reducers、action types、action creators、selectors、constants、utils
• Reducer 只处理并置操作类型
• 选择器仅从并置状态拉取

2) 使用 Redux-Saga 来编排跨越子状态边界的 Action 流。如果来自不同插件的 reducer 需要为同一事件更新状态，让 saga 监听应用程序/非插件操作，然后分派(dispatch)单独的特定于插件的操作。

例子:

import { CREATE_ITEM } from '../actions'; // i.e. src/actions
import { moduleA, moduleB } from '../modules';

export function* onCreateItem() {
    yield takeEvery(CREATE_ITEM, function* ({ item }) {
        yield put(moduleA.actionCreators.addNewItem(item));
        yield put(moduleB.actionCreators.setMostRecentlyCreatedItem(item.name));
    })
}

通过这种模式，Redux-Saga 成为特定于应用程序的操作和与应用程序无关的子状态之间的间接层，以便每个子状态独立变化。

最后，结构选择器使用广泛接受的 delegation approach ，这与上述模式配合得很好。

注意事项:

• 将会有更多的 Action 和故事来跟踪
• 这是我的自以为是的方法，我根据使用它扩展 redux 应用程序的经验推荐它