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

Posted 2023-04-15

【中文标题】React, Redux Application - 传递初始状态的最佳模式

【英文标题】：React, Redux Application - Best pattern for passing initial state

【发布时间】：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 的对象，我可以在其中看到整个状态形状。我在减速器文件中写入的唯一初始状态是属于减速器的状态，我没有直接在我的组件中使用，它们只是减速器组合的一部分。

【参考方案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;