Condivisione dei dati tra due Redux Reducers/States

Question

Questa è una soluzione ragionevole per la condivisione dei dati tra due stati/riduttori?

//combineReducers 
function coreReducer(state = {}, action){ 

    let filtersState = filters(state.filters, action); 
    let eventsState = events(state.events, action, { filters: filtersState}); 

    return { events: eventsState, filters : filtersState}; 

} 

export const rootReducer = combineReducers(
    { 
     core : coreReducer, 
     users 
    } 
); 

caso affermativo, come si può garantire l'ordine con cui vengono eseguite le funzioni riduttore se sia risposta alla stessa evento inviato e la seconda funzione riduzione dipende il nuovo stato del primo?

Supponiamo di inviare un evento SET_FILTER che si aggiunge alla raccolta activeFilters nei filtri Store e in seguito modifica la visibilità degli elementi nell'archivio eventi rispetto ai valori activeFilters.

//ActiveFilters reducer 
function filtersActions(state = {}, action){ 

    switch (action.type) { 
     case SET_FILTER: 
      return Object.assign({}, state, { 
       [action.filterType]: action.filter 
      }) 
     case REMOVE_FILTER: 
      var temp = Object.assign({}, state); 
      delete temp[action.filterType]; 
      return temp; 

     case REMOVE_ALL_FILTERS: 
      return {}; 

     default: 
      return state 
    } 
} 

Credo di aver trovato la risposta - INFORMATICA dati Derivato - selezionare di nuovo

http://redux.js.org/docs/recipes/ComputingDerivedData.html

Answer 1

/--------container--------/ 
import {getGroupsAndMembers} from '../reducers' 
const mapStateToProps = (state) => { 
    return { 
    inputValue: state.router.location.pathname.substring(1), 
    initialState: getGroupsAndMembers(state) <-- this one 
} 
} 


/--------reducers--------/ 
export function getGroupsAndMembers(state){ 
    let { groups, members } = JSON.parse(state) 
    response = {groups, members} 
    return response; 
} 


GroupsContainer.propTypes = { 
//React Redux injection 
pushState: PropTypes.func.isRequired, 
// Injected by React Router 
children: PropTypes.node, 
initialState:PropTypes.object, 
} 

non dimenticate di seguire le linee guida per 'connect'

export default connect(mapStateToProps,{ pushState })(GroupsContainer) 

Answer 2

Se hai due riduttori e uno dipende da un valore da un primo, devi solo aggiornare con attenzione, e la soluzione migliore sarà solo per utilizzare una funzione speciale, che prima imposterà il filtro e quindi eseguirà query sugli eventi corrispondenti. Inoltre, tieni presente che se il recupero degli eventi è un'operazione asincrona, devi nidificare anche in base al tipo di filtro, altrimenti esiste una possibilità di competizione e si verificano eventi errati.

I have created a library redux-tiles per affrontare la verbosità di redux cruda, quindi userò in questo esempio:

import { createSyncTile, createTile } from 'redux-tiles'; 

const filtering = createSyncTile({ 
    type: ['ui', 'filtering'], 
    fn: ({ params }) => params.type, 
}); 

const events = createTile({ 
    type: ['api', 'events'], 
    fn: ({ api, params }) => api.get('/events', { type: params.type }), 
    nesting: ({ type }) => [type], 
}); 

// this function will just fetch events, but we will connect to apiEvents 
// and filter by type 
const fetchEvents = createTile({ 
    type: ['api', 'fetchEvents'], 
    fn: ({ selectors, getState, dispatch, actions }) => { 
    const type = selectors.ui.filtering(getState()); 
    return dispatch(actions.api.events({ type })); 
    }, 
});