代码之家 › 专栏 › 技术社区 › Mohammad

异步redux函数如何工作?

react-redux redux asynchronous reactjs javascript

Mohammad · 技术社区 · 7 年前

我开始在reactjs学习redux。我试图实现一个异步结构来重做,但我真的很困惑…

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

但在许多例子中,我从未见过它们在函数前使用async,在promise变量前等待。

例如,请查看以下两个链接:

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

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

那么我如何在reducer中调用async函数并返回异步结果呢?

例如,我想用一个异步函数准备这个列表,并用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
    }
}

2 回复 | 直到 7 年前

Bogdan M. 7 年前

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

一个动作是一个或多个减速箱的触发器
存储已打开,所有数据都已包含,只有reducere才能使用从存储“dispatch”获得的方法更改它
reducer是一段代码,它在存储上产生不可变的更改。

因此,为了同步地对存储区进行更改,必须调用store方法 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

Abslen Char 7 年前

一种方法是使用 redux-thunk 这里有一个简单的小例子,可以让您开始使用 重铸 .

export const getlist =()=> dispatch =>{
   fetch(`api link for your list`).then(res => res.json())
            .then(data => {
              dispatch({type:'GET_NEWS' , payload:data})
            });
};

然后可以在组件中分派函数

推荐文章

zuZuu · React Redux-无法设置未定义的属性(设置“value”)

3 年前

universe11 · 对伊默来说,这是正确的还是错误的?

3 年前

Huy282002 · 将redux toolkit与JS一起使用时,不能跳过在CreateSicle()中键入状态

3 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

3 年前

Kiv Daor · 当某些项具有未知值时,排序数组无法正常工作

3 年前

Chong Lip Phang · 不变性检查中间件在Redux工具包中做什么?

3 年前

geyser · React Redux toolkit-输入字段的状态管理

3 年前

Avishay Matayev · 正在获取redux的connect HOC的包装组件类型,以便与React一起使用。在不重新导入的情况下重新创建对象

3 年前

Hamed Ezati · 为什么项目会附加到redux而不是替换?

3 年前

Arash jahan bakhshan · redux未使用React 18重新呈现组件

3 年前