异步 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 函数如何工作?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 react redux 中使用异步函数

如何让 React Redux 异步操作返回一个承诺?

将异步操作分派到 redux-saga 后如何捕获 redux 存储中的更改

如何让 Redux Thunk 和 Apollo GraphQL 协同工作

如何链接异步操作redux saga(获取XHR请求)

Redux thunk:如何等待异步操作的完成