How to secure client side of React + Redux + reactRouter app?

I am building a react + redux + reactRouter app. I have an api that sends me a token after login, so I can secure my api, but I have frontend routes (like dashboards) that should be secured.

I have a login form that dispatches a login action.

.../actions/loginAction.js

axios.post('/api/auth', {
        email: email,
        password: password
    }).then(function (response) {
        dispatch({
            type: response.data.token ? types.LOGIN_SUCCESS : LOGIN_FAILED,
            email: email
        });
    }).catch(function (error) {
        dispatch({
            type: LOGIN_FAILED,
            error: error
        });
    });

and reducer

import * as types from '../actions/actionTypes';

let initialState = {
    email: '',
    isAuthenticated: false,
    authenticating: false,
    authError: false
};

export default (state = initialState, action) => {
    switch (action.type){
        case types.LOGIN_START:
            return Object.assign({}, state, {authenticating: true});
        case types.LOGIN_FAILED:
            return Object.assign({}, state, {authenticating: false, isAuthenticated: false, authError: action.error});
        case types.LOGIN_SUCCESS:
            return Object.assign({}, state, {
                authenticating: false,
                isAuthenticated: true,
                authError: false,
                email: action.email
            });
        default:
            return state;
    }
};

It works, but anyone can hack it and just edit the redux-stored value from the console, or dispatch the LOGIN_SUCCESS action, or even edit the js where it's validated, right? How to avoid it?