当 Reducer 中的存储发生更改时,useSelector 不会更新。 ReactJS 终极版

新手上路,请多包涵

我正在改变减速机的状态。在调试时,我检查了状态是否真的改变了。但是组件没有更新。

零件:

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

减速器:

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

原文由 Danilo Cunha 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 721
2 个回答

注意:您最好开始使用 redux-toolkit 来防止在您的代码中引用它是使用 redux 的更好且几乎必须的方法

在处理对象时,您面临的问题非常普遍,道具不会改变,因为您正在更改对象属性,但对象本身不会从反应端改变。

即使你给它一个全新的对象,React 也看不到属性对象的变化,因为引用保持不变。

您需要像这样创建一个新参考:

 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
  }
}

要添加更多内容,您可以了解解决此问题的 Immer 库。

原文由 elad BA 发布,翻译遵循 CC BY-SA 4.0 许可协议

没必要

Object.assign(state.data, data);

总是在更改数组或对象的数据时

return(
  object: {...state.object, a: 1, b: 2},
  array: [...state.array, 1, 2, 3]
)

这 3 个点 ( ... ) 确保您创建了一个新对象。在 redux 上,你必须始终创建一个新对象,而不仅仅是更新状态。这样 redux 不会验证您的数据是否已更改。

当有嵌套对象或数组时,是同一件事

只需注意:

 initialState = {
 object: {
     ...object,
     anotherObject:{
        ...anotherObject,
        a: 1,
        b: 2
      }
   }
}

原文由 Victor Sena de Lima Attar 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题