使用React Redux商店的最佳方法是什么？

Question

我正在将Redux-Thunk用于Reactjs项目。但我不确定该如何建立Redux商店。制作每个网页的redux存储会很好吗？现在我为每个对象（可能与每个数据库表相关）进行了存储，例如站点，房间，传感器...

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网站。但是数据表之间存在关系。例如

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

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

我正在将Redux-Thunk用于Reactjs项目。但我不确定该如何建立Redux商店。制作每个网页的redux存储会很好吗？现在我为每个对象进行存储（也许是...

Answer 1

Redux存储通常是根据slices