调度完成后，如何从 useSelector 获取 state？

Question

我有一个 FormCheck 组件，它在 onChange 事件上调用 handleChange function。 任务：更改复选框的 state，并使用新的 state 向服务器发送请求。 问题是提交是稍后完成的，即在提交之前执行了getSelectedCategories function。

const data = useSelector((state) => state.products);
const boxes = getBoxes(data);


const handleChange = (id) => {
    dispatch(setFilterCategory(id));
    const selectedCategories = getSelectedCategories(data);
    console.log(selectedCategories); // This is done before the dispatch while the state changes
    dispatch(fetchProducts(selectedCategories); 
};

return (
  {boxes.map(item => {
     return <FormCheck label={item.value} checked={item.isChecked} onChange={() => handleChange(item.id)}
  })}
);

Answer 1

这就是useEffect()的用途：

const data = useSelector((state) => state.products);
const selectedCategories = getSelectedCategories(data);

const handleChange = (id) => {
    dispatch(setFilterCategory(id));
};

// is executed whenever selectedCategories changes
useEffect(() => {
  dispatch(fetchProducts(selectedCategories);
}, [selectedCategories])

Answer 2

根据定义，在 function 组件的主体中定义的回调只能访问 state、props 和在组件呈现时创建回调时存在的值。

如果您正在调度一个操作，那么该代码不可能访问下一行的新Redux state（甚至是 React 状态）。

如果您确实需要立即访问新的 Redux state，您可以通过有权访问getState的 thunk 来实现：

const updateCategoryAndFetch = (category) => {
  return (dispatch, getState) => {
      dispatch(setFilterCategory(id));
      const selectedCategories = getSelectedCategories(getState());
    dispatch(fetchProducts(selectedCategories)
  }
}

// later, in the component:

const handleChange = (id) => {
  dispatch(updateCategoryAndFetch(id));
}