(React / Redux) Asyn c проблема в действии Redux

Question

Не удалось успешно использовать решения из предыдущих сообщений.

Я пытаюсь запустить действие каждый раз, когда приложение загружается, используя useEffect в приложении. js вот так:

  26 | const App = () => {
  27 |   
  28 |   useEffect(() => {
> 29 |     store.dispatch(loadUser());
  30 |   }, []);
  31 | 
  32 |   return (

Ошибка, которую я получаю:

Error: Actions must be plain objects. Use custom middleware for async actions.

Действие:

export const loadUser = () => (dispatch, getState) => {
      dispatch({ type: USER_LOADING})

      const token = getState().auth.token

      const config = {
          headers : {
              "Content-type": "application/json"
          }
      }

      if (token) {
          config.headers["x-auth=token"] = token
      }

      axios.get("/api/auth/user", config) 
      .then(res => dispatch({
          type: USER_LOADED,
          payload: res.data
      }))
      .catch(err => {
          dispatch(returnErrors(err.response.data, err.response.status))
          dispatch({
              type: AUTH_ERROR
          })
      })
  }

Что я делаю не так?

Answer 1

Вы должны использовать пользовательское промежуточное ПО для асинхронных c действий ( redux-thunk или redux-saga ). Я уже дал полный пример в ответ на следующий вопрос. Вы можете использовать его:

Реакция Redux на выборку данных из бэкэнд-подхода

Если у вас есть какие-либо вопросы, оставьте комментарий здесь

Answer 2

По умолчанию действия в redux должны возвращать объект с ключом type.

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

Вы захотите установить пакет redux-thunk и включить его в свое промежуточное ПО массив, когда вы создаете свое хранилище редуксов.

Answer 3

Redux сам по себе довольно простой рабочий процесс. Отправляемые действия должны быть объектом, обычно с типом и полезной нагрузкой. Этот рабочий процесс несколько болезнен для асинхронных c действий, которые требуют многократных отправок на всех этапах действия. Вот где появляются дополнительные инструменты, такие как Redux Thunk или Redux Sagas . Мне кажется, вы используете Redux Thunk, но не подключили промежуточное ПО Thunk.

Куда бы вы ни создавали свой магазин, вы должны применять промежуточное программное обеспечение Redux Thunk, как это.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

// Note: this API requires redux@>=3.1.0
const store = createStore(rootReducer, applyMiddleware(thunk));

Answer 4

Если у вас есть asyn c logi c в действиях, вам нужно интегрировать какое-то промежуточное программное обеспечение с избыточностью, например redux-thunk или redux-saga. Я предпочитаю Thunk, так как его проще использовать.