![](/img/trans.png)
[英]Typescript/React functional component's props function - what type?
[英]Functional component props/state/store not updated in function - what's a viable alternative?
首先对我需要实现的目标进行一些描述。 我在前端 (React) 中显示主要对应于数据库行的信息,用户可以对这些对象进行常规 CRUD 操作。 但是,我还在发送到前端的 JSON 中添加了一些虚拟行,因为有些对象是“默认值”并且不应插入到数据库中,除非用户确实想要修改它们。 所以我需要做的是,一旦用户想要修改前端的“默认”对象,我首先必须将该对象发布到特定端点,该端点将其从常量复制到数据库,然后再跟进请求修改该行。
其次,围绕这个的架构。 为了在前端存储行的状态,我通过easy-peasy使用Redux,并且我有一个在修改之前进行第一次保存的thunk
。 一旦用户想要在 UI 的任何位置编辑“默认”对象(大约有 20 种不同的编辑对象的方法),程序流程如下所示:
await
edaction
并使用正确的 ID-s 更新存储中的这些对象现在,我遇到的问题是从第 5 步到第 7 步,因为组件看起来基本是这样的:
const Foo = () => {
const insertToDatabaseIfNecessary = useStoreActions((actions) => actions.baz.insertIfNecessary)
const items = useStoreState((state) => state.baz.items);
const onSave = async () => {
await insertToDatabaseIfNecessary();
// do the actual modifying thing here
axios.post(...items);
}
return (
<button onClick={onSave}>Save!</button>
);
}
如果您比我更了解功能组件,那么您就会知道在onSave()
中insertToDatabaseIfNecessary()
将更新 Redux 存储中的值,但是当我们进行实际修改和post(...items)
POSTed 不会更新,因为它们将在下次调用组件时更新。 如果这是一个基于类的组件,它们会被更新,但是 easy-peasy 不支持基于类的组件。 我想一种方法是直接使用基于类的组件和 Redux,但我觉得可能有一种不同的模式可以用来解决我的问题,而无需求助于基于类的组件。
问题:是否有一种理智的方法来使用功能组件来做到这一点?
easy-peasy 中的 Thunks 可以处理异步事件,所以你应该把你的 axios 帖子放在那里,例如
insertToDatabaseIfNecessary : thunk(async (actions, payload) => {
// First update the data on the server
await axios.post(payload.items);
// Assuming that the post succeeds, now dispatch and action to update your store.
// (You'd want to check your post succeeded before doing this...)
actions.updateYourStoreData(payload);
})
这个简单的 thunk 将等待异步发布完成,因此您可以在 Foo 组件中使用如下操作:
insertToDatabaseIfNecessary();
您不需要等待它或在您的 Foo 组件中使用 onSave 函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.