Должен ли я получить данные в реагирующем компоненте или в избыточном действии?

Question

Я начал учиться Реагировать немного больше, и у меня есть один вопрос.Что является лучшим методом для извлечения данных из API.

1. Извлечение данных в компонент реагирования и передача данных в действие приведения
2. Извлечение данных внутри действия приведения

Answer 1

Если вы не можете использовать Redux, вы, очевидно, захотите обработать его с помощью действия.

Обычно, если данные используются только в компоненте, было бы хорошо выполнить вызов APIв componentDidUpdate () или в событии.

Если данные будут использоваться группой несвязанных компонентов, или вы в конечном итоге будете выполнять многопотоковую подпрограмму, вы захотите использовать Redux.

actions / index.js

  export const FETCH_DATA = 'FETCH_DATA'

  export const fetchData = async () => {

    const url = `http://your-url.com`;
    const request = await fetch(url);

    return {
      type: FETCH_DATA,
      payload: request
    }
  }

Затем отправьте данные, полученные в результате действия, в редуктор.

redurs / reducer_whwhat.js

  import { FETCH_DATA } from '../actions/index'

  export default function(state = [], action) {
    switch (action.type) {
      case FETCH_SOMETHING:
      return [ action.payload.data, ...state ];
    }

    return state;
  }

Answer 2

Общее правило:

• Если ваши данные будут использоваться только внутри отдельного компонента, вам следует хранить его там.
• Если ваши данные будут использоваться в других компонентах, сохраните их в родительском или глобальном состоянии (в данном случае, в качестве избыточности).

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

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

Answer 3

Ваши компоненты будут в основном использоваться для отправки действий и отображения возвращенных данных.Вы инициируете вызов API в компоненте с отправленным действием и обрабатываете ответ внутри редуктора.Это обычно делается с помощью что-то вроде redux-thunk или redux-sagas для обработки асинхронных действий, после чего вы можете получить доступ к данным, которые вы вызвали из своего состояния избыточности.Лично я фанат redux-саги, вы можете проверить это здесь

Redux-Saga

Answer 4

1. Fetch data in react component and pass data to redux action - NO (dispatch api action in the component)

2. Fetch data inside of redux action - NO (dispatch API promise here)

Инициируйте действие, чтобы вызвать API (асинхронное действие) и обработать ответ в редукторе.

Действие может быть запущено внутри вашего компонента.

Если компонентсобираясь использовать эти данные, подключите их к глобальному состоянию (избыточному), используя функцию HOC connect