Извлечение данных из хранилища, если оно существует, или вызов API в противном случае в React

Question

Предположим, у меня есть компонент BookOverview, который отображает детали книги.

Я получаю данные с действием:

  componentDidMount() {
    this.props.getBook(areaId);
  }

А потом я получаю данные с помощью axios:

export const getBook = () => async dispatch => {
  const res = await axios.get(
    `${API}/${ENDPOINT}`
  );

  dispatch({
    type: GET_BOOK,
    payload: res.data
  });
};

Как мне изменить этот код на:

1. если в магазине излишних книг уже загружена книга - верните ее
2. если в магазине нет книги - позвоните в соответствующий API?

Какова наилучшая практика для достижения этого, пожалуйста?

Answer 1

Вы можете иметь getState внутри вашего создателя асинхронных действий , например:

export const getBook = () => async (dispatch, getState) => {
  if(!getState().book /* check if book not present */) {
    const res = await axios.get(
      `${API}/${ENDPOINT}`
    );

    dispatch({
      type: GET_BOOK,
      payload: res.data
    });
  } else {
    dispatch({
      type: GET_BOOK,
      payload: getState().book
    });
  }
};

For More Асинхронные действия-Redux

Answer 2

Вы можете попробовать это так:

  componentDidMount() {
    if(this.props.book==null){
       this.props.getBook(areaId);
    }
  }

Я предположил, что у вас есть свойство под названием book в ваших реквизитах. который заполняет конкретный редуктор.
Вы должны подписаться на конкретный редуктор, чтобы получить this.props.book - это дает значение, которое у вас есть в вашем магазине.