Redux商店中的Stale State

zkure5ic  于 2023-11-19  发布在  其他
关注(0)|答案(1)|浏览(113)

我有一个名为<SearchForm />的组件,其中包含以下代码:

const insuranceDetails = useAppSelector((state) => state.search.insuranceDetails);

字符串
useAppSelector是一个围绕useSelector的自定义钩子,它只为TS提供正确的类型推断。
<SearchForm />还具有以下模态:

<InsuranceDetailsModal
  isOpen={isModalOpen}
  onClose={handleModalClose}
/>


模态的基本部分:

const handleConfirm = () => {
  dispatch(updateInsuranceDetails(insuranceDetails));
  onClose();
};


基本上,这将调度一个操作来更新Redux商店,然后调用onClose,这实际上是我们传入的handleModalClose prop:

const handleModalClose = () => {
  setIsModalOpen(false);
  search();
};


这里的关键是search函数,它在<SearchForm />组件中,下面是search函数的代码:

const search = async () => {
  console.log(insuranceDetails);
};


insuranceDetails是我之前使用useAppSelector钩子读到的。
问题是,我得到了insuranceDetails的初始状态,其中对象内部的每个属性都是空的。
以下是我的切片供参考:

const searchSlice = createSlice({
  name: 'search',
  initialState: {
    insuranceDetails: {
      firstName: '',
      lastName: '',
      insurance: { key: '', value: '', label: '', code: '' },
      birthDate: '',
      memberId: '',
    },
  },
  reducers: {
    updateInsuranceDetails(state, action) {
      state.insuranceDetails = action.payload;
    },
  },
});

export const { updateInsuranceDetails } = searchSlice.actions;
export default searchSlice.reducer;


我确信Redux正在更新状态,因为当我在search函数之外时,它会注销正确的值,而当试图从模态之外调用search时,它实际上是工作的。
<SearchForm />具有以下功能:

const handleSearchClick = async (e: React.MouseEvent<Element, MouseEvent>) => {
  e.preventDefault();
  search();
};


当我从<SearchForm />本身而不是从modal调用它时,它工作得很好。

bybem2ql

bybem2ql1#

简而言之,您的handleModalClose()引用旧的search(),它包含旧的insuranceDetails
我相信你需要找到一种方法来告诉SearchForm在模态刚刚关闭和保险值insuranceDetails更新时触发search()
我认为修复应该是这样的:
InsuranceDetailsModal

const handleConfirm = () => {
  dispatch(updateInsuranceDetails(insuranceDetails));
  dispatch(updateShouldSearch(true));
  onClose();
};

字符串
SearchForm

const {insuranceDetails, shouldSearch} = useAppSelector((state) => state.search.insuranceDetails);

const search = async (detailsToSearch) => {
  console.log(detailsToSearch);
};

useEffect(() => {
  if (!shouldSearch) {
    return;
  }

  search(insuranceDetails);
  dispatch(updateShouldSearch(false));
}, [insuranceDetails, shouldSearch])


请同时实现shouldSearch的missing state值和reducer。

相关问题