使用 React Redux Store 的最佳方式是什么？

Question

我正在为 Reactjs 项目使用 Redux-Thunk。但我不确定我必须如何制作 redux 商店。为每个网页制作redux store会好吗？现在我为每个对象（可能与每个数据库相关 table）创建了商店，例如站点、房间、传感器...

import { siteConstants } from '../_constants';

function sites(state = {}, action) {
    switch (action.type) {
        case siteConstants.GETALL_REQUEST:
            return {
                ...state,
                get : {
                    status : 'loading',
                    data : [],
                }
            };
        case siteConstants.GETALL_SUCCESS:
            return {
                ...state,
                get : {
                    status : 'success',
                    data : action.sites,
                }
            };
        case siteConstants.GETALL_FAILURE:
            return {
                ...state,
                get : {
                    status : 'failure',
                    data : [],
                    error: action.error
                }
            };

        case siteConstants.GET_REQUEST:
            return {
                ...state,
                selected_site : {
                    status : 'loading',
                    data : [],
                }
            };
        case siteConstants.GET_SUCCESS:
            return {
                ...state,
                selected_site : {
                    status : 'success',
                    data : action.site,
                }
            };
        case siteConstants.GET_FAILURE:
            return {
                ...state,
                selected_site : {
                    status : 'failure',
                    data : [],
                    error: action.error
                }
            };

        case siteConstants.ADDNEW_REQUEST:
            return {
                ...state,
                add : {
                    status : 'adding',
                }
            };
        case siteConstants.ADDNEW_SUCCESS:
            return {
                ...state,
                add : {
                    status : 'success',
                },
                get : {
                    ...state.get,
                    data : [
                        ...state.get.data,
                        {
                            _id : action.site._id,
                            name : action.site.name,
                            description : action.site.description,
                            vectorMapUrl : action.site.vectorMapUrl,
                        }
                    ]
                }
            };
        case siteConstants.ADDNEW_FAILURE:
            return {
                ...state,
                add : {
                    status : 'failure',
                    error : action.error,
                }
            };

        case siteConstants.DELETE_REQUEST:
            return {
                ...state,
                delete : {
                    status : 'deleting',
                }
            };
        case siteConstants.DELETE_SUCCESS:
            return {
                ...state,
                delete : {
                    status : 'success',
                },
                get : {
                    ...state.get,
                    data : [
                        ...state.get.data.slice(0, action.index),
                        ...state.get.data.slice(action.index + 1)
                    ]
                }
            };

        case siteConstants.DELETE_FAILURE:
            return {
                ...state,
                delete : {
                    status : 'success',
                    error : action.error,
                }
            };

        case siteConstants.UPDATE_REQUEST:
            return {
                ...state,
                update : {
                    status : 'updating',
                }
            };
        case siteConstants.UPDATE_SUCCESS:
            return {
                ...state,
                update : {
                    status : 'success',
                },
                get : {
                    ...state.get,
                    data : [
                        ...state.get.data.slice(0, action.i),
                        {
                            _id : action.site_id,
                            name : action.name,
                            description : action.description,
                            vectorMapUrl : action.vectorMapUrl,
                        },
                        ...state.get.data.slice(action.i + 1)
                    ]
                }
            };
        case siteConstants.UPDATE_FAILURE:
            return {
                ...state,
                update : {
                    status : 'failure',
                    error : action.error,
                }
            };

        default:
            return state;
    }
}

export default sites;

如您所见，目前我的 Web 应用程序项目中只有一个站点 CRUD 商店。但是数据tables之间存在关系。例如

站点table
房间 table 将具有站点 ID
传感器table 将具有站点 ID 和房间 ID

对于这种关系，React Redux 最好的存储结构是什么

Answer 1

Redux 存储通常围绕 切片的概念构建， 其中整个数据集被拆分为可管理的单元，每个单元都是存储中的一个属性目的。这使您可以一次对每个段进行编码，从而减少您必须在一个地方管理的代码量。

有两种思想流派：按数据切片与按特征切片。

当商店由数据建立时，您可以通过自上而下的方式以连贯的方式布置数据来获得优势。对于您所描述的内容，这是有道理的，因为您的数据中具有清晰的层次关系。然后可以以类似 CRUD 的方式定义操作。

一个挑战就是您如何管理不同类型的相关数据。如果您在不同的切片中有不同的数据，但必须跨数据集保持 ID 完整性，您最终可能会跨不同的切片进行多次分派，这可能会变得棘手。当然，您可以将所有数据保存在一个切片中，但这会变得臃肿。

按功能设置商店时，每个切片都将与您应用中的一个 activity 相关。如果您有不同的 "transactions,"，例如具有配置文件管理、购物和社区支持博客的零售站点，这可能更有意义。按特征切片使您可以将更新关注点限制在单个切片中，从而使与该特征关联的每种类型的数据更易于管理。它还允许您将某个功能的切片代码与该功能的组件放在同一文件夹中，从而形成一个很好的综合包。

按功能切片的主要挑战是确定可能受多个功能影响的数据去向。共享或公用文件夹，或确定 "home" 文件夹，是管理此问题的不同方式。

那么正确答案是什么？当然，这取决于。很大程度上与您希望应用程序如何流动有关。它是严重孤立的吗？那么功能可能就有意义了。它主要是数据访问吗？那么数据切片可能有意义。

您最终可能会混合使用两者。您可能有一个带有附加功能切片的主要 "data slice,"。您可能会发现，一种事务流比另一种更容易管理数据完整性，例如使用向导式输入路径与自由格式 "add a node to a tree" 样式。

最后一点：如果您希望快速管理切片并使用一些不错的内置理念和功能，我强烈建议您查看 Redux Toolkit。它是由制作 Redux 的同一批人制作的，并实施了他们在野外看到的最佳实践，以使 reducer 和 action creator 代码易于管理和自我记录。

使用 React Redux Store 的最佳方式是什么？

What is the best way to use the React Redux Store?

javascript

reactjs

redux

redux-thunk