Exchange between two Redux Reducers / States

Question

Is this a smart solution for exchanging data between two states / gears?

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

If so, how can you guarantee the execution order of the reducer functions if both responses to the same sent event and the second reduction function depend on the new state of the first?

Let's say that we dispatch a SET_FILTER event that adds activeFilters to the Filter Store to the collection, and then changes the visibility of the items in the event stores in relation to the values ​​of 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 } } 

I think I found the answer - Computing Derived Data - Reselect

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, } 

don't forget to follow the recommendations for "connect"

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

Answer 2

If you have two gearboxes, and one depends on the value of the first, you just need to update them carefully, and the best solution would be to simply use a special function that will first set the filtering and then request the appropriate events. Also, keep in mind that if fetching events is an asynchronous operation, you should also nest it based on the type of filtering - otherwise there is a chance of a race condition and you will have the wrong events.

I created a redux tile library to deal with the verbosity of raw redux, so I will use it in this example:

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