Estoy cambiando el estado en reducer. En la depuración, comprobé que el estado realmente había cambiado. Pero el componente no se actualiza.
Componente:
function Cliente(props) { const dispatch = useDispatch() const cliente = useSelector(({ erpCliente }) => erpCliente.cliente) const { form, handleChange, setForm } = useForm(null) ... function searchCepChangeFields() { //This call the action and change the store on reducer dispatch(Actions.searchCep(form.Cep)) .then(() => { // This function is only taking values from the old state. // The useSelector hook is not updating with store setForm(form => _.setIn({...form}, 'Endereco', cliente.data.Endereco)) setForm(form => _.setIn({...form}, 'Uf', cliente.data.Uf)) setForm(form => _.setIn({...form}, 'Cidade', cliente.data.Cidade)) setForm(form => _.setIn({...form}, 'Bairro', cliente.data.Bairro)) }) }Reductor:
case Actions.SEARCH_CEP: { return { ...state, data: { ...state.data, Endereco: action.payload.logradouro, Bairro: action.payload.bairro, UF: action.payload.uf, Cidade: action.payload.cidade } }; }NOTA: es mejor que comience a usar redux-toolkit para evitar referencias en su código, es una forma mejor y casi imprescindible de usar redux
el problema al que se enfrenta es muy común cuando se maneja con objetos, los accesorios no cambian porque está cambiando una propiedad del objeto, pero el objeto en sí no cambia desde el lado de reacción.
incluso cuando le está dando un objeto completamente nuevo, la reacción no ve el cambio del objeto de propiedad porque la referencia permanece igual.
necesita crear una nueva referencia como esta:
Object.assign(state.data,data); return { ...state, data: { ...state.data, Endereco: action.payload.logradouro, Bairro: action.payload.bairro, UF: action.payload.uf, Cidade: action.payload.cidade } }para agregar más, puede obtener información sobre la biblioteca Immer que resuelve este problema.
no es necesario
Object.assign(state.data, data);siempre al cambiar datos de matrices u objetos
return( object: {...state.object, a: 1, b: 2}, array: [...state.array, 1, 2, 3] ) estos 3 puntos ( ... ) aseguran que creas un nuevo objeto. En redux, siempre debe crear un nuevo objeto, no solo actualizar el estado. De esta manera, redux no verificará que sus datos hayan cambiado.
Al tener objetos anidados o arreglos, es lo mismo
Solo ten atención a:
initialState = { object: { ...object, anotherObject:{ ...anotherObject, a: 1, b: 2 } } }De alguna manera, Object.assgin no reconoce la sintaxis de actualización con ES6.
updatedConnectors = state.connectorsEsto creará una referencia al estado actual. En ES6, que introduce el... para hacer una nueva referencia.
updatedConnectors = { ...state.connectors } ..... return { ...state, connectors: updatedConnectors };use esto para extraer y copiar una nueva referencia. Eso también provocará un cambio de estado.
Actualización 27/sep/20 He escrito algunas funciones útiles para manejar esto, intentemos esto
//Utils export const getStateSection = ({ state, sectionName }) => { const updatedState = { ...state } const updatedSection = updatedState[sectionName] return updatedSection } export const mergeUpdatedSection = ({ state, sectionName, updatedValue }) => { const updatedState = { ...state } updatedState[sectionName] = updatedValue return updatedState }Luego, en cualquier reductor, debería usarse así:
//reducer const initState = { scheduleDetail: null, timeSlots: null, planDetail: { timeSlots: [], modifedTimeSlots: [], id: 0 } } ..... const handlePickTimeSlot = (state, action) => { let planDetail = getStateSection({ state, sectionName: 'planDetail' }) // do stuff update section return mergeUpdatedSection({ state, sectionName: 'planDetail', updatedValue: planDetail }) }