当 Store 在 Reducer 中发生更改时，useSelector 不会更新。 ReactJS Redux

Question

我正在更换减速机中的 state。 在调试时，我检查了 state 确实发生了变化。 但是组件没有更新。

零件：

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

Answer 1

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

在处理对象时，您面临的问题很常见，道具不会改变，因为您正在更改 object 属性，但 object 本身不会从反应方面改变。

即使你给它一个全新的 object 反应也不会看到属性 object 发生变化，因为参考保持不变。

你需要像这样创建一个新的参考：

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 库。

Answer 2

没必要

Object.assign(state.data, data);

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

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

这 3 个点 ( ... ) 确保您创建一个新的 object。 在 redux 上，您必须始终创建新的 object，而不仅仅是更新 state。 这样 redux 将不会验证您的数据是否已更改。

当有嵌套对象或 arrays 时，是同一回事

只需注意：

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

Answer 3

不知何故，Object.assgin 无法识别使用 ES6 语法的更新。

updatedConnectors = state.connectors

这将创建对当前 state 的引用。 在 ES6 中，引入了 ... 以进行新的引用。

updatedConnectors = { ...state.connectors }
.....
return  {
    ...state,
    connectors: updatedConnectors
};

使用它来提取和复制新的参考。 这也会触发 state 变化

更新 2020 年 9 月 27 日我写了一些工具 function 来处理这个，让我们试试这个

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

然后在任何减速器中，它应该像这样使用：

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

Answer 4

由于 elab BA 的编辑队列已满。

这里接受的答案是他所说的数据在那里

case MYCASE:
  let newDataObject = Object.assign(state.data, {...action.payload});
  // or 
  // let newDataObject = Object.assign(state.data, {key: 'value', 'key2': 'value2' ...otherPropertiesObject);
  return {
    ...state,
    ...newDataObject
  }

Answer 5

修改创建商店的文件时，可能会发生一个有趣的边缘情况。

如果您拥有 redux 存储Provider组件的文件（通常是 App.tsx）没有被 React 的热模块重新加载器 (HMR) 重新加载，但 redux 存储文件被修改并因此被 HMR 重新加载，则创建一个新的存储并存储Provider中的提供程序实际上最终可能会将您的 redux 存储的旧实例传递给useSelector 。

我在setup-store.ts文件中留下了以下评论：

/**
 * Note! When making changes to this file in development, perform a hard refresh. This is because
 * when changes to this file are made, the react hot module reloading will re-run this file, as
 * expected. But, this causes the store object to be re-initialized. HMR only reloads files that
 * have changed, so the Store Provider in App.tsx *will not* be reloaded. That means useSelector
 * values will be querying THE WRONG STORE.
 */

Answer 6

问题在于 React 的渲染工作方式。

您正在调用

调度（Actions.searchCep（form.Cep））
.then(() => {...一些逻辑...}

但是所有这些都在 ONE 渲染中工作，并且您只能在 NEXT 渲染中获得更改的存储。 then ，您只能从第一个渲染中获得道具