如何在 redux 中控制布尔值？

Question

似乎我无法分派布尔值。谁能告诉我我做错了什么？

这是我的状态：

const initState = {
  allSongs: songData(),
  currentSong: { ...songData()[0] },
  isPlaying: false,
};

如何用dispatch函数控制isPlaying？当我这样dispatch时，它不起作用：

      dispatch(playAndPause(true));

这是我的动作创建者：

export const playAndPause = (isPlayingBool) => (dispatch) => {
  return {
    type: PLAY_AND_PAUSE,
    payload: {
      isPlaying: isPlayingBool,
    },
  };
};

减速机：

case PLAY_AND_PAUSE:
      return {
        ...state,
        isPlaying: action.payload.isPlaying,
      };

Answer 1

playAndPause 不是普通的动作创建者，而是一个 thunk 动作创建者。 最里面的函数将被调用并允许您在实际调度之前执行异步操作。如果您想走那条路，那么正确的方式应该是

export const playAndPause = (isPlayingBool) => (dispatch) => {
  // do some stuff here
  dispatch({
    type: PLAY_AND_PAUSE,
    payload: {
      isPlaying: isPlayingBool,
    },
  });
};

但实际上，您可能想要一个普通的动作创建者：

export const playAndPause = (isPlayingBool) => ({
  type: PLAY_AND_PAUSE,
  payload: {
    isPlaying: isPlayingBool,
  },
});

另外，请注意，您在这里编写了一种非常古老的 redux 风格。如果你现在正在学习 redux，请停止你正在学习的任何教程，转而关注the official tutorials。 最后，您将使用当前使用的样式编写大约 1/4 的代码。

例如，现代 redux 不需要您编写任何动作创建器或动作类型常量。它也没有 switch...case 减速器或减速器中的不可变逻辑。