Как работают асинхронные избыточные функции?

Question

Я начал изучать редукс в реактиве.Я пытаюсь реализовать асинхронную структуру для редукции, но я действительно запутался ...

Чтобы реализовать асинхронную функцию и использовать обещание, вы должны набрать async перед своей функцией и использовать await перед использованием обещания.

Но во многих примерах я никогда не видел, чтобы они использовали асинхронные перед функциями и ожидали перед переменными обещаний.

Например, посмотрите на эти две ссылки:

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

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

Итак, как я могу вызвать асинхронную функцию в редукторе и вернуть результаты асинхронизации?

Например, я хочу подготовить этот список с помощью асинхронной функции и получитьсписок с Axios или 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
    }
}

Answer 1

Один из способов сделать это - использовать 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})
            });
};

и затем вы можете отправить функцию в свой компонент

Answer 2

Подводя итог, я хотел бы предложить, чтобы понять это понятие действие, редуктор и хранилище.

• Действие - это триггер для одного или нескольких случаев редуктора
• , в котором находится хранилищеи все данные содержатся, и только Redures может изменить их, используя метод, который они получают из хранилища 'dispatch'
• Редуктор - это фрагмент кода, который производит неизменные изменения в хранилище.

Таким образом, чтобы синхронно внести изменения в хранилище, вы должны вызвать метод хранилища dispatch, чтобы редуктор вызвал и изменил то, что вы ожидаете.

Чтобы выполнить асинхронный вызов, вам нужно будет вызвать редукторкогда асинхронный вызов завершен.

Пример:

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