Question

我正在尝试使用React＆amp; amp;来构建可重用的网格组件。终极版。每个子组件（过滤器，分页器，分拣机等）都需要初始配置或初始状态。目前我将reducer中的配置设置为初始状态。下面是列定义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;

网格组件连接到存储并根据商店中的状态构建列。

为了使网格可重用，以便不同的组件可以传递不同的列定义，那么最好的模式是什么。我需要在哪里保持这种配置？

Answer 1

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

这是结构

配置对象

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;

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

1 个答案: