Question

我正在尝试在Reactor生命周期方法（例如componentDidUpdate或componentWillUpdate）中，在化简器更新新状态之后，需要相应地重新渲染组件。但是我看到控制台中已更改的日志，但是它既不会触发lifeCycleMethods，也不会触发组件重新渲染

最初，在我的化简器中，我像这样使用Object.assign：

return Object.assign({}, state, {
            emailAddr: action.data
        });

但是在阅读了一些StackOverflow答案后意识到这是行不通的。因此，我还尝试了以下一些答案所建议的事情。

state = {
                ...state,
                emailAddr: action.data,
            };

            console.log("newState: ", state);


            return state;

和

  return {
            ...state,
            emailAddr: action.data,
        };

这都不触发任何lifeCycleMethods。

emailReducer.js

export default function emailInfo(state = {
    emailAddr: '',
}, action){

    switch(action.type){

        case 'SENT_EMAIL_DATA':
            debugger;
            console.log("state when email address sent: ", state);
            console.log("action.data when email address sent: ", action.data);
            // return Object.assign({}, state, {
            //     emailAddr: action.data
            // });

            state = {
                ...state,
                emailAddr: action.data,
            };

            console.log("newState: ", state);


            return state;
            // return {
            //     ...state,
            //     emailAddr: action.data,
            // };


        default: {
            return {
                ...state
            }
        }
    }
}

action.js

import { API_URL } from '../global';
import axios from 'axios';

export const sentEmailData = data => {
    return {
        type: 'SENT_EMAIL_DATA',
        data
    };
};


export function submitEmail( data) {
    return dispatch => {
        return axios.post(API_URL, {
            emailAddr: data
        })
            .then(response => {
                if (response.data.errors === null ) {
                    console.log("response 2222: ", response);
                    dispatch(sentEmailData(response));
                } else {
                    throw new Error(response.data.errors[0].statusMessage);
                }

            })
            .catch(err =>{
                console.log("err 2222: ", err);
            });
    }
}

我了解到减速器必须返回新对象。如果我们更改对象，则组件不会重新渲染。但不确定我还缺少什么

Answer 1

好，因此其他所有遇到相同问题的用户，除我未使用mapStateToProps的组件外，其他所有内容都正确。因此，我的组件无法收听商店中的更改。

我在读取https://github.com/reduxjs/redux/issues/585上的线程后才意识到这一点。在阅读完@andrewchumich的评论后，我更改了组件，一切开始工作。

Redux减速器状态更改不会触发生命周期方法

1 个答案: