Действия должны быть простыми объектами Ошибка в React и Redux

Question

Я пытаюсь установить сообщение в уведомлении для пользователя, если они голосуют за элемент.

Это ошибка, которую я получаю, и это происходит, когда я нажимаю на кнопку и вызываю мой voiceHandlerфункция.

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

Это функция, и сообщение об ошибке выделяет строку, где я вызываю функцию setNotification.

 const voteHandler = anecdote => {
    props.addVote(anecdote);
    const notification = `You voted for ${anecdote.content}`;
    props.setNotification(notification, 5);
  };

Это мой редуктор уведомлений:

const initialState = null;

const notificationReducer = (state = initialState, action) => {
  switch (action.type) {
    case "SET_NOTIFICATION":
      state = action.data;
      return state;
    case "REMOVE_NOTIFICATION":
      return initialState;
    default:
      return state;
  }
};

export const setNotification = (content, seconds) => {
  return dispatch => {
    dispatch({
      type: "SET_NOTIFICATION",
      content
    });
    setTimeout(() => {
      dispatch({
        type: "REMOVE_NOTIFICATION"
      });
    }, seconds * 1000);
  };
};

export const removeNotification = () => {
  return dispatch => {
    dispatch({
      type: "REMOVE_NOTIFICATION",
      notification: null
    });
  };
};

export default notificationReducer;

Я экспериментировал с этим, и появляется уведомление, если я использую эту функцию только для setNotification, таким образом, это выглядит таквозможно есть проблема с тем, как я вызываю вызов setTimeout?

export const setNotification = (content, seconds) => {
  return {
    type: "SET_NOTIFICATION",
    data: content
  };
};

Я все еще изучаю Redux, так что, возможно, это очевидная ошибка, но я просто не уверен. Спасибо.

Answer 1

export const setNotification = (content, seconds) => {
  return dispatch => {
    dispatch({
      type: "SET_NOTIFICATION",
      content
    });
    setTimeout(() => {
      dispatch({
        type: "REMOVE_NOTIFICATION"
      });
    }, seconds * 1000);
  };
};

Проблема должна исходить из приведенного выше кода. Вам нужно будет установить Redux-Thunk, если вы хотите dispatch несколько object из вашего действия приставки.

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

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