来自mapStateToProps的ReactJS + Redux道具不会在调度操作上刷新

Question

After dispatching action props do not changed. My redux container:

class ConnectedAppContent extends React.Component {
    render() {
        return (
            <div id="content">
                <Router>
                    <Switch>
                        <PropsRoute path="/login" component={LoginForm} doLogin={this.props.doLogin} />
                        <PrivateRoute path="/scan" redirectTo="/login" component={Scanner} token={this.props.token} />
                        <PrivateRoute path="/result" redirectTo="/login" component={ParsedQRCode} token={this.props.token} />
                    </Switch>
                </Router>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        token: state.token,
        parsedQRCode: state.parsedQRCode
    }
}

const mapDispatchToProps = dispatch => ({
    doLogin: token => dispatch(doLogin(token))
});

export const AppContent = connect(mapStateToProps, mapDispatchToProps)(ConnectedAppContent);

And main App component, wrapped into Provider :

export class App extends React.Component {
    render() {
        return (
            <div className='container'>
                <AppHeader />
                <AppContent />
                <AppFooter />
            </div>
        );
    }
}

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.querySelector('.wrapper')
)

What I should do for props updating? Props are binded with initial state but do not refresh after doLogin .

UPDATED

My reducer:

const initialState = {
    token: null
}

export const loginReducer = (state = initialState, action) => {
    switch (action.type) {
        case DO_LOGIN:
            return {...state, token: action.payload}
        default:
            return state;
    }
}

And doLogin action:

export const doLogin = token => ({
    type: DO_LOGIN,
    payload: token
})

And PrivateRoute component (I got it from here ):

export const PrivateRoute = ({ component, redirectTo, ...rest }) => {
    // rest.token is undefined here, even after dispatching doLogin
    return (
        <Route {...rest} render={routeProps => {
            return !!rest.token ? (
                renderMergedProps(component, routeProps, rest)
            ) : (
                <Redirect to={{
                    pathname: redirectTo,
                    state: { from: routeProps.location }
                }}/>
            );
        }}/>
    );
};

And PropsRoute (also from here ):

export const PropsRoute = ({ component, ...rest }) => {
    return (
        <Route {...rest} render={routeProps => {
            return renderMergedProps(component, routeProps, rest);
        }}/>
    );
}

Answer 1

Ah, caught the culprit: (It should be loginReducer's token)

const mapStateToProps = state => {
    return {
        token: state.loginReducer.token,

Answer 2

I assume that you are expecting the prop token value on the Scanner component that you are binding to routes, in which case React router does not pass props to childrens.

I would discourage you to pass props to routes and instead make all your routes components container components, but if for some reason you think this wont be an issue than one way of passing props to children in router is :

<PrivateRoute path="/scan" redirectTo="/login" component={() => <Scanner token={this.props.token}>}/>