Question

一个简单的问题：我有两个组件，有两个减速器。应用程序的状态基本上分为两部分，类似于{stateComponent1: object, stateComponent2: object ....}. Component2，此外，“使用”第一个组件的状态，这是由MapStateToProps函数完成的我们在其中分配stateComponent1和stateComponent2（“拥有”）。

问题是，当Component1执行导致stateComponent1更改的调度时，Component2应该重新呈现，因为它在其道具中有stateComponent1？关键是这不会发生。

编辑：我告诉你我的代码

我有一个登录的商店，基本上就是：

操作

export const actionCreators = {
    requestLogin: (credentials: Credentials): AppThunkAction<KnownAction> => (dispatch, getState) => {
        dispatch({
            type: 'LOGIN_REQUEST',
            isFetching: true,
            isAuthenticated: false,
            credentials: credentials
        });
        const config = {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `username=${credentials.username}&password=${credentials.password}`
        };
        const loginTask = fetch(`http://localhost:50679/api/jwt`, config).then(response => response.json()).then((data) => {
            if (!data.idToken) {
                dispatch({
                    type: 'LOGIN_FAILURE',
                    isFetching: false,
                    isAuthenticated: false,
                    message: 'Error en el login'
                });
                return Promise.reject(data);
            } else {
                // If login was successful, set the token in local storage
                if (typeof localStorage !== 'undefined') {
                    localStorage.setItem('idToken', data.idToken);
                }
                // Dispatch the success action
                dispatch({
                    type: 'LOGIN_SUCCESS',
                    isFetching: false,
                    isAuthenticated: true,
                    idToken: data.idToken
                });
            }
        });
    },

REDUCERS：

export const reducer: Reducer<LoginState> = (state: LoginState, action: KnownAction) => {
    switch (action.type) {
    case 'LOGIN_REQUEST':
        return {
            isFetching: true,
            isAuthenticated: false,
            idToken: '',
            credentials: action.credentials,
            message: ''
        };
    case 'LOGIN_SUCCESS':
        return {
            isFetching: false,
            isAuthenticated: true,
            idToken: action.idToken,
            credentials: null,
            message: ''
        };
    case 'LOGIN_FAILURE':
        return {
            isFetching: false,
            isAuthenticated: false,
            idToken: '',
            credentials: null,
            message: action.message
        };
    case 'LOGOUT_SUCCESS':
        return {
            isFetching: true,
            isAuthenticated: false,
            idToken: '',
            credentials: null,
            message: ''
        };
    default:
        // The following line guarantees that every action in the KnownAction union has been covered by a case above
        const exhaustiveCheck: any = action;
    }

    return state || unloadedState;
};

现在，我有一个订阅登录状态的组件，当这个状态发生变化时必须“找出”，例如，当登录完成时，我这样做：

return connect(
    (state: ApplicationState) =>
    Object.assign(state.login, state.location, state.history)
)(AuthenticatedComponent);

问题是我的AuthenticationComponent组件不知道state.login何时发生了变化。

Answer 1

您应该覆盖shouldComponentUpdate。

$ docker run -it --rm tomcat:8.0

反应＆amp; Redux传播状态发生变化

1 个答案: