React.js：如何知道 dispatch() 何时完成

Question

const data = useSelector(store.data);
const [name, setName] = useState(data && data.name ? data.name : "")

const getData = () => {
  dispatch(action.getData()); // loads data in store
}

return <div>{name}</div>

它呈现名称为“”，因为我在设置状态之前没有完成disaptch 我怎么知道 dispatch() 什么时候完成？ / 如何修复它

Answer 1

你不知道。一旦商店切片发生变化，您的选择器将导致您的组件重新呈现。如果你在这篇文章中包含你的减速器，人们可以更好地猜测这里发生了什么，但这是我的猜测：

您的切片没有初始值，因此您的选择器在第一次渲染时返回未定义。当您呈现您的 div 时，您试图访问未定义值的参数，这将导致 TypeError ...您可以通过确保数据永远不会未定义（在您的切片中传递初始值）或仅通过当数据真实时呈现 data.name ...

const data = useSelector(store.data);
const getData = () => {
  dispatch(action.getData()); // loads data in store
}

return data ? <div>{data.name}</div> : undefined

我想指出，在示例中，您提供的任何内容都不会触发您的 getData fn ...

Answer 2

如果你需要知道一个dispatched action什么时候被处理完，state被更新了，你可以使用Redux提供的store.subscribe()方法。这个方法允许你订阅 store 中的变化，每次调度一个动作和更新状态时都会调用它