Я пытаюсь получить новое состояние после того, как редуктор обновляет его в методах жизненного цикла React, таких как 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);
});
}
}
Я понимаю, что редукторы должны возвращать новый объект. Если мы мутируем объект, компонент не будет перерисован. Но не уверен, что еще мне не хватает