Redux: Erstellen Wurzel Minderer von combineReducers und „lose“ Eigenschaften

Question

ich einen Redux-Shop erstellen möchten, die diese Form hat:

store = { 
    loaded: Boolean, 
    loading: Boolean, 
    view: Object, // uses combineReducers 
    layers: Object // uses combineReducers 
} 

Bisher meine Wurzel Minderer wie folgt aussieht:

rootReducer Js

import view from './view'; 
import layers from './layers'; 

const initialState = { 
    loaded: false, 
    loading: false, 
}; 

function loadState(state = initialState, action = {}) { 
    switch (action.type) { 
    case 'LOADED': 
     return { 
     ...state, 
     loaded: true, 
     loading: false, 
     }; 

    case 'LOADING': 
     return { 
     ...state, 
     loaded: false, 
     loading: true, 
     }; 

    default: 
     return state; 
    } 
} 

export default combineReducers({ 
    view, 
    layers, 
    // hmmmm, putting loadState here would give me a loadState object property, 
    // not loose 'loaded' and 'loading' properties 
}); 

Wie habe ich auch diese „lose“ Eigenschaften wie loaded und loading neben ihnen?

Answer 1

@PhiNguyen hat Recht, ich muss diese geladen/laden Eigenschaften in ihre eigenen Reduzierungen drehen!

import { LOADED, LOADING } from '../ActionTypes'; 

export function loaded(state = false, action = {}) { 
    switch (action.type) { 
    case LOADED: 
     return true; 

    case LOADING: 
     return false; 

    default: 
     return state; 
    } 
} 

export function loading(state = false, action = {}) { 
    switch (action.type) { 
    case LOADED: 
     return false; 

    case LOADING: 
     return true; 

    default: 
     return state; 
    } 
} 

rootReducer.js

import { loaded, loading } from './load'; 
import view from './view'; 
import layers from './layers'; 

export default combineReducers({ 
    loaded, 
    loading, 
    view, 
    layers 
}); 

Answer 2

Manchmal finde ich einzelne Reduzierungen für ein paar einfachen Eigenschaften Schreiben widerwärtig Overhead sein, so habe ich ein combineReducersWithRoot Dienstprogramm, das ich manchmal verwenden.

export function combineReducersWithRoot(rootReducer, reducers) { 
    return (state, action) => { 
    let newState = rootReducer(state, action); 
    Object.keys(reducers).forEach(domain => { 
     let obj = state ? state[domain] : undefined; 
     newState[domain] = reducers[domain](obj, action); 
    }); 
    return newState; 
    }; 
} 

Jetzt gegeben, eine Staatsstruktur etwas wie folgt aus:

{ 
    loading: bool 
    loaded: bool 
    data: { 
    filter: string 
    arr: object[] 
    } 
} 

Sie dies tun können:

function rootReducer(state = {loading: false, loaded: false}, action) { 
    switch(action.type) { 
    case STARTED_LOADING: 
     return {...state, loading: true, loaded: false}; 
    case FINISHED_LOADING: 
     return {...state, loading: false, loaded: true}; 
    default: 
     return state; 
    } 
} 

function dataReducer(state = {filter: '', arr: []}, action) { 
    switch (action.type) { 
    case SET_FILTER: 
     return {...state, filter: action.value}; 
    case SET_DATA: 
     return {...state, arr: action.arr}; 
    default: 
     return state; 
    } 
} 

export default combineReducersWithRoot(rootReducer, {data: dataReducer});