После диспетчерских действий реквизит не изменился.Мой избыточный контейнер:
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);
И основной App
компонент, обернутый в 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')
)
Что я должен сделать для обновления реквизита?Реквизиты связаны с исходным состоянием, но не обновляются после doLogin
.
ОБНОВЛЕНО
Мой редуктор:
const initialState = {
token: null
}
export const loginReducer = (state = initialState, action) => {
switch (action.type) {
case DO_LOGIN:
return {...state, token: action.payload}
default:
return state;
}
}
И doLogin
действие:
export const doLogin = token => ({
type: DO_LOGIN,
payload: token
})
и PrivateRoute
компонент (я получил его от здесь ):
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 }
}}/>
);
}}/>
);
};
и PropsRoute
(также от здесь):
export const PropsRoute = ({ component, ...rest }) => {
return (
<Route {...rest} render={routeProps => {
return renderMergedProps(component, routeProps, rest);
}}/>
);
}