React, Redux Application - 传递初始状态的最佳模式答案

【问题标题】：React, Redux Application - Best pattern for passing initial stateReact, Redux Application - 传递初始状态的最佳模式
【发布时间】：2018-06-03 12:44:48
【问题描述】：

我正在尝试使用 React 和 Redux 构建一个可重用的 Grid 组件。每个子组件（过滤器、分页器、排序器等）都需要初始配置或初始状态。目前我正在将减速器中的配置设置为初始状态。下面是列定义 reducer 的示例

import { Map, OrderedMap } from 'immutable'

let initialState = OrderedMap({
    'name': Map({ id: 'name', description: 'Name'}),
    'job': Map({ id: 'job', description: 'Job Title'}),
    'salary': Map({ id: 'salary', description: 'Salary'}),
    'phone': Map({ id: 'phone', description: 'Phone'}),
    'state':  Map({ id: 'state', description: 'State'}),
    'hiredate' : Map({id: 'hiredate', description: 'Date Hired'})
});

let columnDefinitionsReducer = (namespace) => (state = initialState, action) => {
    switch (action.type) {
        default:
            return state;
    }
};

export default columnDefinitionsReducer;

Grid 组件连接到 store 并根据 store 中的状态构建列。

为了使网格可重用，以便不同的组件可以传入不同的列定义，最好遵循什么模式。我需要在哪里保留此配置？

【问题讨论】：

我喜欢导出initialState 的对象，我可以在其中看到整个状态形状。我在减速器文件中写入的唯一初始状态是属于减速器的状态，我没有直接在我的组件中使用，它们只是减速器组合的一部分。

标签： reactjs redux react-redux

【解决方案1】：

我通过为网格创建配置对象并将其作为参数传递给减速器来解决它。我不确定这是否是最好的方法，但它符合我的目的

这是结构

配置对象

let employeeConfig = {
    namespace: 'employees',
    columndefs: OrderedMap({
        'name': Map({ id: 'name', description: 'Name'}),
        'job': Map({ id: 'job', description: 'Job Title'}),
        'salary': Map({ id: 'salary', description: 'Salary'}),
        'phone': Map({ id: 'phone', description: 'Phone'}),
        'state':  Map({ id: 'state', description: 'State'}),
        'hiredate' : Map({id: 'hiredate', description: 'Date Hired'})
    }),
    filters: OrderedMap({
        'name': Map({ id: 'name', hint: 'Search by name', value: '', maxValue: '', type: 'text' }),
        'job': Map({ id: 'job', hint: 'Search by job title', value: '', maxValue: '', type: 'text' }),
        'state':  Map({ id: 'state', hint: 'Search by state', value: '', maxValue: '', type: 'text' }),
        'salary':  Map({ id: 'salary', hint: 'Salary', value: '', maxValue: '', type: 'range' }),
        'hiredate':  Map({ id: 'hiredate', hint: 'Hired Date', value: '', maxValue: '', type: 'date-range' })
    }),
    perPage: 10,
    defaultSort: 'id'
}
export default employeeConfig;

Root Reducer

 import employeeConfig from '../components/employees/employee_config'

const employeesReducer = combineReducers({
    currentPage : currentPageReducer(employeeConfig.namespace, 1),
    itemProperties : itemPropertiesReducer(employeeConfig.namespace, employeeConfig.columndefs),       
    itemsPerPage : perPageReducer(employeeConfig.namespace, employeeConfig.perPage),
    sortingProperty : sortReducer(employeeConfig.namespace, employeeConfig.defaultSort),
    filters : filtersReducer(employeeConfig.namespace, employeeConfig.filters)
});

减速器

 let itemsPerPage = (namespace, config) => (state = config, action) => {
    switch (action.type) {
        case `${namespace}/${UPDATE_PER_PAGE}`:
            return action.payload
        default:
            return state;
    }
};

export default itemsPerPage;

【讨论】：