javascript - Actions 必须是普通对象 React 和 Redux 中的错误

Question

我正在尝试在用户对某个项目投票时设置通知消息。

这是我遇到的错误，当我单击按钮并调用我的 voteHandler 函数时就会发生这种情况。

×
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 操作中分派(dispatch)多个对象，您将需要安装 Redux-Thunk。

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));