React-redux-starter-kit: Cannot change route

[ciokan]

I'm fairly certain this is not an issue with this starter kit but I want to make sure. I just picked up React and a lot of things are new to me. I have an action call in one of my components that goes to my reducer which is supposed to change the route among other things. Here's my redux module:

/* @flow */

import { browserHistory } from 'react-router'
// ------------------------------------
// Constants
// ------------------------------------
export const NAVIGATE_TO = 'NAVIGATE_TO';

// ------------------------------------
// Actions
// ------------------------------------
export function navigateTo( path:string = '/' ):Action {
    return {
        type: NAVIGATE_TO,
        path: path
    }
}


export const actions = {
    navigateTo
};

// ------------------------------------
// Action Handlers
// ------------------------------------
const ACTION_HANDLERS = {
    [NAVIGATE_TO]: ( state:string, action:{path:string} ):string => {
        browserHistory.push( action.path );
        return action.path
    }
};

// ------------------------------------
// Reducer
// ------------------------------------
const initialState = '/';
export default function navigationReducer( state:string = initialState, action:Action ):string {
    const handler = ACTION_HANDLERS[action.type];
    return handler ? handler( state, action ) : state;
}

The browserHistory call you see there manages to change the url in the browser but the new component does not mount at all...nothing changes in the actual page. Is there something that I'm supposed to do to get this thing going?

[thangngoc89]

Reducer shouldmust be a pure function, no side effects. You should call browserHistory.push in a thunk instead

But this starter kit is using react-redux-router, you should read it API to know how to navigate around with redux

[MaxNamazov]

According to the react-redux-router docs it should be something like this simple:

import { push } from 'react-router-redux'
...
// and somewhere in action creator  
store.dispatch(push('/some_path'))

[davezuko]

See @thangngoc89 's comment, you should be doing this inside of a thunk or w/ the react-redux-router API. If you are still having trouble after trying either/both of those please let me know and we can re-open, but this is more of an API learning experience than an issue with this project, in my opinion.

[jasonallen]

It looks like this project doesn't use react-redux-router anymore? I'm having the same problem as the OP: calling browserHistory.push( action.path ) – but from the action dispatcher instead of reducer – and it doesn't seem to actually navigate anywhere.