React Redux：将数据返回给组件

我有一个组件，其中会添加一个项目。当提交表单我使用的终极版，这样的事情分派异步操作：React Redux：将数据返回给组件

_onSubmit(event) { 
    const { dispatch } = this.props; 
    const { data } = this.state; 
    event.preventDefault(); 

    dispatch(addItem(data)); 
    }

现在，我的后端将创建一个ID，我可以跟踪进度的任务。通常这个给定的任务需要一段时间才能完成，所以我想显示通知栏。

对于我来跟踪该任务，我需要检索正在进行的给定任务的任务ID。所以我想增加一个回调函数，这样我可以得到的调度信息，像这样：

_onSubmit(event) { 
     const { dispatch } = this.props; 
     const { data } = this.state; 
     event.preventDefault(); 

     dispatch(addItem(data, (id) => console.log(id))); 
     }

但因为有一个双向数据通信回事这种感觉有种“哈克”。

问题：实现这个的最简单方法是什么？

来源

2017-04-08 Alan Souza

因此，您的端点在收到带有任务ID的帖子请求后立即发送响应？ – KornholioBeavis

是的！或几乎立即 –

好了，所以这个过程是这样的：1。 fething_task_Id 2. taskId_fetched_successfully //加载，任务在后台运行的地方3. // task_finished数据//渲染数据 – KornholioBeavis

可以有多种方法来实现这个问题相同的结果。

我会说使用Redux Thunk（中间件），它将使您能够从动作创建者发起多个动作。

那么你应该写这样的事情：

_onSubmit(event) { 
const { dispatch } = this.props; 
const { data } = this.state; 
event.preventDefault(); 

dispatch(addItemActionCreator(data)); 
}

在你行动的创建者，使用一个承诺（如形实转换可以让你做到这一点为好）：

export const addItemActionCreator = (data) => (dispatch) => { 
Promise.get('data').then((data) => { 
    dispatch({ type: STORE_DATA_ID, id: data.id }) 
}) 
}

这将派遣一个将在你的状态下存储id的动作。

在您的组件中，使用connect订阅id，并且您的组件始终具有最新的id值。

希望这会有所帮助。

来源

2017-04-08 05:16:41 shobhit1

谢谢您的回答，我m已经在使用thunk。不幸的是我相信你的回答并不能解决我的问题。可以有多个任务在运行，我怎么知道来自ID的数组是哪一个属于我？我的对象（数据）里面没有任何东西保证是唯一的。 –

为什么不添加一些独特的内部数据对象？ – elmeister

因此，为了您追踪不同的ID，您将拥有不断更新的动作类型，这些动作类型只会更新您的状态的一部分，您将如何知道具体的ID。你将不得不派遣不同的动作来在你的状态的不同部分存储不同的ID，否则它们会重叠，你的常量（动作类型）会让你控制更新状态的哪一部分，然后你可以订阅那部分国家我希望这可以帮助。 – shobhit1

有几种不同的方法来实现这一点。我使用redux-saga和eventChannels做了非常类似的事情。

您也可以使用redux-cycles或redux-observable来达到同样的目的：创建一个订阅了API信号的可观察对象，并在它发出时调度它。

我不是一个重量级的粉丝。也许可能有一种方法可以使用redux-thunk来完成此操作，但我确信它不会很简单/优雅。

来源

2017-04-09 00:57:15 Josep

React Redux：将数据返回给组件

回答

相关问题