Как работает Redux-Thunk?

Question

Итак, я в настоящее время новичок с избыточностью и застрял в промежуточном программном обеспечении. Мне нужно знать, как эти два кода взаимодействуют друг с другом.

Мой создатель действий:

import jsonPlaceHolder from '../APis/jsonPlaceHolder';

export const fetchPosts= ()=>{

  return async (dispatch)=>{

      const response = await jsonPlaceHolder.get('/posts');

      dispatch({type:'FETCH_POSTS',payload: response});

  };

};

код избыточного числа:

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => (next) => (action) => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

Answer 1

Обычный редукс работает только с син c действиями. Redux thunk дает вам возможность работать с асинхронными c действиями (для отправки нескольких действий от одного создателя действия, для асинхронных c действий, которые обычно являются действием REQUEST / RESPONSE / ERROR). Промежуточное ПО - это то, что стоит между вами, отправляя действие, и редуктором, обновляющим магазин. Так как redux работает только с простыми объектами, для использования создателя действий (например, fetchPosts) вам нужно что-то такое (redux-thunk здесь). Он просто вставляет параметр диспетчеризации (и getState, который дает вам возможность получить текущее состояние, если ваш создатель действия зависит от него).

next (action) внутри промежуточного ПО - это метод который распространяет ваш объект действия на следующее промежуточное ПО (или, если оно является последним для вашего редуктора). Redux-thunk проверяет, является ли отправленная вами вещь функцией (поскольку мы говорили, что redux может работать только с простыми объектами), и если это функция, она просто вводит вышеупомянутые параметры.

Так что это в основном :

dispatch (fetchPosts ()) -> redux-thunk-middleware -> это функция, поэтому ее следует вызывать с введенным dispatch / getState (это не будет распространяться на редуктор) -> dispatch ({type: 'FETCH_POSTS', payload: response}) -> redux-thunk-middleware -> не функция, пропустите ее -> reducer -> update update

Надеюсь, это поможет.