问题:

What is the most maintainable and recommended best practice for organising containers, components, actions and reducers in a large React/Redux application?

我的看法:

当前的趋势似乎是围绕相关的容器组件来组织 redux 抵押品(actions、reducers、sagas...)。例如

/src
    /components
        /...
    /contianers
        /BookList
            actions.js
            constants.js
            reducer.js
            selectors.js
            sagas.js
            index.js
        /BookSingle
            actions.js
            constants.js
            reducer.js
            selectors.js
            sagas.js
            index.js        
    app.js
    routes.js

这很好用!尽管此设计似乎存在一些问题。

问题:

当我们需要从另一个容器访问actions、selectors 或sagas 时，这似乎是一种反模式。假设我们有一个全局 /App 容器，其中包含一个 reducer/state，用于存储我们在整个应用程序中使用的信息，例如类别和枚举。继续上面的示例，使用状态树:

{
    app: {
        taxonomies: {
            genres: [genre, genre, genre],
            year: [year, year, year],
            subject: [subject,subject,subject],
        }   
    }
    books: {
        entities: {
            books: [book, book, book, book],
            chapters: [chapter, chapter, chapter],
            authors: [author,author,author],
        }
    },
    book: {
        entities: {
            book: book,
            chapters: [chapter, chapter, chapter],
            author: author,
        }
    },
}   

如果我们想在 /BookList 容器中使用 /App 容器中的 selector，我们需要在 中重新创建它>/BookList/selectors.js(肯定是错的？)或者从 /App/selectors 导入它(它总是完全相同的选择器吗？不。)。这两种方法对我来说都不是最佳选择。

此用例的主要示例是身份验证(啊...我们确实爱恨你的身份验证)，因为它是非常常见的“副作用”模型。我们经常需要在整个应用程序中访问 /Auth sagas、操作和选择器。我们可能有容器 /PasswordRecover, /PasswordReset, /Login, /Signup .... 实际上在我们的应用程序 /Auth contianer 根本没有实际组件!

/src
    /contianers
        /Auth
            actions.js
            constants.js
            reducer.js
            selectors.js
            sagas.js

简单地包含上面提到的各种通常不相关的身份验证容器的所有 Redux 附带 Material 。

最佳答案

我个人使用 ducks-modular-redux提案。

这不是“官方”推荐的方式，但对我来说效果很好。每个“鸭子”包含一个 actionTypes.js , actionCreators.js , reducers.js , sagas.js和 selectors.js文件。这些文件中没有对其他鸭子的依赖，以避免循环依赖或 duck circle ，每个“鸭子”只包含它必须管理的逻辑。

然后，在根目录下我有一个 components和一个 containers文件夹和一些根文件:

components/ 文件夹包含我的应用程序的所有纯组件

containers/ 文件夹包含由上述纯组件创建的容器。当容器需要特定的 selector 时涉及很多“鸭子”，我把它写在我写 <Container/> 的同一个文件中组件，因为它是相对于这个特定容器的。如果selector跨多个容器共享，我在单独的文件中创建它(或在提供这些 Prop 的 HoC 中)。

rootReducers.js :通过组合所有 reducer 简单地暴露根 reducer

rootSelectors.js 为每个状态片段公开根选择器，例如在您的情况下您可以有类似的东西:

/* let's consider this state shape

state = {
    books: {
        items: {  // id ordered book items
            ...
        }
    },
    taxonomies: {
        items: {  // id ordered taxonomy items
            ...
        }
    }
}

*/
export const getBooksRoot = (state) => state.books

export const getTaxonomiesRoot = (state) => state.taxonomies

它让我们“隐藏”每只鸭子内部的状态形状 selectors.js文件。由于每个 selector在你的鸭子中接收整个状态，你只需要导入相应的 rootSelector在你的里面selector.js文件。

rootSagas.js 在你的鸭子中编写所有传奇故事并管理涉及许多“鸭子”的复杂流程。

所以在你的情况下，结构可以是:

components/
containers/
ducks/
    Books/
        actionTypes.js
        actionCreators.js
        reducers.js
        selectors.js
        sagas.js
    Taxonomies/
        actionTypes.js
        actionCreators.js
        reducers.js
        selectors.js
        sagas.js
rootSelectors.js
rootReducers.js
rootSagas.js

当我的“鸭子”够小的时候，我经常跳过文件夹的创建，直接写一个ducks/Books.js或 ducks/Taxonomies.js将所有这 5 个文件(actionTypes.js、actionCreators.js、reducers.js、selectors.js、sagas.js)合并在一起的文件。

关于javascript - Redux:组织容器、组件、 Action 和缩减器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38385861/