React, Redux Application - 초기 상태 전달에 가장 적합한 패턴

Question

Refact & Redux를 사용하여 재사용 가능한 Grid 구성 요소를 작성하려고합니다. 각 하위 구성 요소 (필터, Paginator, Sorters 등)는 초기 구성 또는 초기 상태가 필요합니다. 현재 감속기의 구성을 초기 상태로 설정하고 있습니다. 다음은 열 정의 리듀서의 예입니다.

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

그리드에 대한 구성 개체를 만들고이를 매개 변수로 전달하여 해결했습니다. 나는 이것이 최선의 방법입니다 있는지 확실하지 않습니다,하지만 그것은

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;