React, Redux-Anwendung - Bestes Muster für die Übergabe des Ausgangszustands

Question

Ich versuche, eine wiederverwendbare Grid-Komponente mit React & Redux zu erstellen. Jede Unterkomponente (Filter, Paginator, Sorter usw.) benötigt eine Erstkonfiguration oder einen Anfangszustand. Momentan stelle ich die Konfiguration im Reducer als Ausgangszustand ein. Unten ist ein Beispiel für Spaltendefinitionen Reduzierer

Die Grid-Komponente ist zum Speichern verbunden und erstellt Spalten basierend auf dem Status im Speicher.

Um das Gitter wiederverwendbar zu machen, so dass verschiedene Komponenten unterschiedliche Spaltendefinitionen durchlaufen können, ist das beste Muster zu beachten. Wo muss ich diese Konfiguration behalten?

Answer 1

Ich löste es, indem ich ein Konfigurationsobjekt für das Gitter erstellte und es als Parameter an Reduzierstücke übergab. Ich bin nicht sicher, ob dies der beste Weg ist, aber es dient meinem Zweck

Hier ist die Struktur

Config Objekt

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; 

Wurzel 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) 
}); 

Reduzierstück

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

export default itemsPerPage;