用调度替换返回会导致错误

Question

查看一个简单的应用程序，我正在尝试理解redux。您可以在此处找到该应用：一个简单的Redux应用

Redux文档说："更改商店内部状态的唯一方法是派遣操作"

但是这个应用中的动作创造者看起来像这样：

export const selectSong = song => {
  return {
    type: "SONG_SELECTED", 
    payload: song 
  };
};

显然，该动作没有派遣。它退还了。因此，我认为如果我更改功能会发生什么情况，以使其派遣操作：

export const selectSong = song => {
  dispatch({
    type: "SONG_SELECTED", 
    payload: song 
  });
};

，但这会导致以下错误：

无法编译./src/actions/index.js 第4行："派遣"不是定义的no-unnundef

有人可以解释为什么？

Answer 1

实际动作在这里派遣。

连接函数通常传递1或2个参数：

第一个参数：从redux中拔出状态的函数，并将其分配给您的反应组件将使用的道具。

第二个参数：绑定动作创建者函数的函数，因此您不必在整个地方编写props.dispatch（actionname（）），您只需撰写props.actionname（）

https://daveceddia.com/redux-mapdispatchtoprops-object-form/

Answer 2

错误是因为dispatch在任何地方都没有定义。Redux本身（没有中间Wares）期望对象描述动作。代码样本中的调度限制为使用react-redux connect更高订单功能的REDUX，因此您无需明确调用dispatch。

派遣动作的形式，使用派遣明确我只有在使用redux-thunk等中间件时才看到的。

redux-thunk：

thunks是基本redux副作用的推荐中间件 逻辑，包括需要访问的复杂同步逻辑 像Ajax请求一样存储和简单的异步逻辑。

这意味着您可以返回功能。

而不是：

export const selectSong = song => {
  return {
    type: "SONG_SELECTED", 
    payload: song 
  };
};

您可以：

export const selectSong = song => {
  return (dispatch, getState) => {
    const { songs } = getState() // You can access state with getState
    dispatch({
      type: "SONG_SELECTED",
      payload: song
    });
  };
};

这是用redux-thunk指向代码样本的链接：

https://codesandbox.io/s/1pr283o8l

以及与类似thunk代码的" redux"的另一个链接：

https://redux.js.org/advanced/async-actions#actionsjs-asynchronous

Answer 3

我的荣幸，所以这里发生了什么，您有一个正在返回动作对象的动作创建者，在该动作对象中，您拥有type和payload的属性。

要能够将您的动作创建者变成可以返回功能而不是动作对象的创建者，您需要决定是否要安装redux-thunk这样的中间件并将其带入混音中。

是从该库中获得dispatch和getState参数，我们可以用来传递函数，而不是从我们的动作创建者那里传递一个动作对象。

一旦您导入并安装了redux-thunk，我想您必须像这样重构您的动作创建者：

之前：

// Action creator
export const selectSong = (song) => {
  // returns an action
  return {
    type: 'SONG_SELECTED',
    payload: song
  };
};

之后：

export const selectSong = (song) => async dispatch => {
  const response = await songsAPI.get("/songs");
  dispatch({ type: "SONG_SELECTED", payload: song });
};

现在，我不知道您是否是从外部API中获取歌曲，但是我以这种方式编写了代码，以指出这是您要开发异步动作创建者时要实现的东西，这也是重点使用诸如redux-thunk之类的中间件并以这种方式重构您的动作创建者，因为Redux不会开箱即用。

请注意，我不使用getState作为参数t使用该参数或getState应该被遮蔽，表明您没有在任何地方使用过，这是一个线索，如果您不使用它，则说明了这一点。