CODEWITHSUNDEEP
javascriptreactjsreact-routerredux
Matt Richards
Matt Richards

Reputation: 1477

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

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;

Other useful info;

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

Relevant deps

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

Upvotes: 15

Views: 4669

Answers (1)

nanobar
nanobar

Reputation: 66355

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

Upvotes: 7

Related Questions