异步 redux 函数如何工作?
Posted
技术标签:
【中文标题】异步 redux 函数如何工作?【英文标题】:How do async redux functions work? 【发布时间】:2018-10-31 20:49:46 【问题描述】:我开始在 reactjs 中学习 redux。我正在尝试为 redux 实现一个异步结构,但我真的很困惑......
要实现异步函数并使用 Promise,您应该在函数之前键入 async 并在使用 Promise 之前使用 await。
但在许多示例中,我从未见过他们在函数之前使用 async 并在 promise 变量之前使用 await。
例如看看这两个链接:
https://redux.js.org/advanced/async-actions
https://github.com/reduxjs/redux/tree/master/examples/async
那么如何在reducer中调用异步函数并返回异步结果呢?
例如,我想用异步函数准备这个列表,然后用 axios 或 fetch API 获取列表:
const list = [
id: 1, title: 'One',
id: 2, title: 'Two',
id: 3, title: 'Three'
]
export function newsReducer(state = [], action)
switch (action.type)
case 'GET_NEWS':
return list
default:
return state
【问题讨论】:
为什么不使用 thunk 或 redux-saga? @Sujit.Warrier 不,我应该搜索这些并了解更多信息,谢谢 【参考方案1】:我建议总结一下,理解这个概念 action、reducer 和 store。
一个动作是一个或多个 reducer 案例的触发器 store 已开启,所有数据都已包含在内,只有 reduceres 可以使用从 store 'dispatch' 获取的方法更改它 reducer 是一段代码,可在商店中产生不可变的更改。因此,为了同步更改 store,您必须调用 store 方法 dispatch
以便 reducer 触发并更改您期望的内容。
要进行异步,您必须在异步调用完成后调用 reducere。
例子:
// action method called by react component when user submits changes
export function updateProduct(product)
// returns a function since this method has to be called also with dispatch() in the component
return dispatch =>
// trigger first store change
dispatch( type: PRODUCT_EDIT.PRODUCT_EDIT_REQUEST );
// trigger secod store change and mark the async call, updateProduct is ASYNC
ProductsService.updateProduct(product)
.then(
res =>
dispatch( type: PRODUCT_EDIT.PRODUCT_EDIT_SUCCESS, data: res.data );
dispatch(successNotification('Product updated'));
,
error =>
dispatch( type: PRODUCT_EDIT.PRODUCT_EDIT_FAILURE, data: error.response.data );
dispatch(errorNotification(error.response.data));
);
;
我认为您应该查看的其他教程: https://medium.com/@rajaraodv/step-by-step-guide-to-building-react-redux-apps-using-mocks-48ca0f47f9a
【讨论】:
【参考方案2】:一种方法是使用redux-thunk
,就像评论中建议的@Sujit.Warrier 一样,这里是一个小而简单的示例,可以帮助您开始使用redux-thunk
。
export const getlist =()=> dispatch =>
fetch(`api link for your list`).then(res => res.json())
.then(data =>
dispatch(type:'GET_NEWS' , payload:data)
);
;
然后你可以在你的组件中调度函数
【讨论】:
以上是关于异步 redux 函数如何工作?的主要内容,如果未能解决你的问题,请参考以下文章
将异步操作分派到 redux-saga 后如何捕获 redux 存储中的更改