Redux; accessing other parts of the state when using composed reducers via combineReducers

Question

Update

Thanks to @Dominic Tobias and @gabdallah for spotting my embarrassing mistake.

The correct answer is of course;

so try checking action.payload.

The other comments regarding the switch statement and the action object we're referring to errors I made in my example, which I've since corrected.

---

Imagine I've combined the the following two reducers;

import { combineReducers } from 'redux'
import { routerStateReducer } from 'redux-router'
import entries from './entries'

export default combineReducers({
  router: routerStateReducer,
  entries
})

I would like to mutate the entries state based on another part of the global state, in this case; the router state provided by redux-router in order for example to implement pagination.

How could I do something like this?

// entries.js
import { ROUTER_DID_CHANGE } from 'redux-router/lib/constants'
const initialState = {}

function entries (state = initialState, action) {
  switch (action.type) {
    case ROUTER_DID_CHANGE:
      // How can I access `state.router` here in order to do something like this;
      if (routerState.location.pathname === '/entries') {
        return {
          ...state,
          page: routerState.location.query.page || state.page,
          limit: routerState.location.query.limit || state.limit
        }
      }
      return state
  }
}

Some other approaches that come to mind;

• connect the router state to the Entries route component, use the componentWillMount lifecycle method to check router state and call an action creator with the page and limit values mutating the entries state in turn. This would work; however I'm using some transition middleware to call a static fetchData method on the route component prior to mounting it, so the data get's fetched, then the pagination action creator would be called afterwards; not the desired behaviour.
• listen to router actions somewhere else (i.e a dedicated router redux module), call an action creator on the entries store, but I'm not sure how well this fits with redux-router or how I would get access to the router part of the global store.
• don't do this at all; simply query the router state in the static fetchData method

Other useful info;

The implementation in question is Universal App heavily inspired by react-redux-universal-hot-example

Relevant deps

• react 0.14.2
• redux 3.0.3
• react-router 1.0.0-rc3
• redux-router 1.0.0-beta3

How can I achieve this or similar behaviour? Am I even thinking about this the right way?

Answer 1

Back in the old days before things got simpler for a developer people would listen to the popstate event on the history object ;)

It looks like the required info is on the action?

history.listen((error, nextRouterState) => {
 ...
 store.dispatch(routerDidChange(nextRouterState));

and the action:

export function routerDidChange(state) {
  return {
    type: ROUTER_DID_CHANGE,
    payload: state
  };
}

So try checking action.payload.

However your switch statement is using action instead of action.type so there's something fishy going on there.. You shouldn't need to do action = {} either - see http://redux.js.org/docs/basics/Reducers.html