React、Redux Application - 初期状態を渡すのに最適なパターン

Question

私はReact & Reduxで再利用可能なGridコンポーネントを構築しようとしています。各サブコンポーネント（フィルタ、ページネーター、ソーターなど）には、初期設定または初期状態が必要です。現在、私は減速機の設定を初期状態として設定しています。以下

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

私はグリッドの設定オブジェクトを作成し、それを減速材のパラメータとして渡して解決しました。私はこれが最善の方法であるかどうかわからないのですが、それはここに私の目的

を果たす構造である

configオブジェクト

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; 

ルートリデューサー

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;