レデューサーでストアが変更されたときにuseSelectorが更新されない。ReactJS Redux

debugcn 投稿 Dev

ダニロ・クーニャ

レデューサーの状態を変えています。デバッグ時に、状態が実際に変更されたことを確認しました。しかし、コンポーネントは更新されていません。

成分：

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

elad BA

オブジェクトを処理するときに直面する問題は非常に一般的です。オブジェクトのプロパティを変更しているため、小道具は変更されませんが、オブジェクト自体は反応側から変更されません。

まったく新しいオブジェクトを指定している場合でも、参照は同じままであるため、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                    
  }
}

さらに追加するには、この問題を解決するImmutable.jsライブラリについて学ぶことができます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]