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

异步redux函数如何工作?

react-redux redux asynchronous reactjs javascript

1

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 年前

1

2

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

2

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

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