ReactJS + Redux реквизиты из mapStateToProps не обновляются при диспетчеризации - PullRequest
0 голосов
/ 13 ноября 2018

После диспетчерских действий реквизит не изменился.Мой избыточный контейнер:

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);
        }}/>
    );
}

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Ах, поймал виновника: (Должен быть логин RedRucer)

const mapStateToProps = state => {
    return {
        token: state.loginReducer.token,
0 голосов
/ 13 ноября 2018

Я предполагаю, что вы ожидаете значение prop token для компонента Scanner, который вы привязываете к маршрутам, и в этом случае маршрутизатор React не передает реквизиты дочерним элементам.

Я бы вас не одобрилпередавать реквизиты в маршруты и вместо этого делать все компоненты компонентов ваших маршрутов контейнерами, но если по какой-то причине вы считаете, что это не проблема, то один из способов передачи реквизитов дочерним элементам в маршрутизаторе:

<PrivateRoute path="/scan" redirectTo="/login" component={() => <Scanner token={this.props.token}>}/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...