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 ments 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 bined the the following two reducers;

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

export default bineReducers({
  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 e to mind;

• connect the router state to the Entries route ponent, use the ponentWillMount 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 ponent 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?

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 ments 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 bined the the following two reducers;

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

export default bineReducers({
  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 e to mind;

• connect the router state to the Entries route ponent, use the ponentWillMount 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 ponent 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?

• javascript
• reactjs
• react-router
• redux

• 1 Actions are an object of type and an optional payload. As mentioned by @Dominic Tobias, you should be switching on the type property of the action and sending the route as the payload to the reducer. – user5004821 Commented Nov 19, 2015 at 15:54

1 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/docs/basics/Reducers.html