Question

我开始在reactjs中学习redux。我正在尝试为redux实现异步结构，但我真的很困惑......

要实现异步函数并使用promise，您应该在函数之前键入async并在使用promise之前使用await。

但是在很多例子中我从未看到他们在函数之前使用异步并等待在promise变量之前。

例如，看看这两个链接：

https://redux.js.org/advanced/async-actions

https://github.com/reduxjs/redux/tree/master/examples/async

那么如何在reducer中调用异步函数并返回异步结果？

例如，我想使用异步函数准备此列表并使用axios或fetch API获取列表：

＆＃13;

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
    }
}

＆＃13;

Answer 1

总结一下，我建议，理解这个概念动作，减速器和存储。

操作是一个或多个减速机案例的触发器
商店已启用并且所有数据都已包含，只有reduceres可以使用他们从商店'dispatch'获得的方法更改它
reducer是一段代码，可以在商店中产生不可变的变化。

因此，为了同步更改商店，您必须调用商店方法dispatch，以便减速器触发并更改您的期望。

要执行异步操作，您必须在完成异步调用时调用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

Answer 2

一种方法是使用@ {1}}，如@ Sujit.Warrier在评论中提出这是一个简单的小例子，可以让你开始使用redux-thunk。

redux-thunk

然后您可以在组件中调度该函数

异步redux函数如何工作？

2 个答案: