Question

看一个简单的应用程序，我试图了解Redux。您可以在这里找到该应用：a simple Redux app

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行：“ dispatch”未定义为no-undef

有人可以解释为什么吗？

Answer 1

实际上是在这里派遣行动。

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

第一个参数：该函数从Redux中提取状态片段并将其分配给React组件将使用的道具。

第二个参数：一个绑定动作创建者函数的函数，这样您不必到处都写props.dispatch（actionName（）），您只需编写props.actionName（）

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

Answer 2

该错误是因为dispatch没有在任何地方定义。 Redux本身（没有中间件）期望对象描述操作。您的代码示例中的调度是通过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

还有另一个链接到'redux'的类似代码：

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

Answer 3

我很高兴，所以这里发生的事情是您有一个操作创建者，该操作创建者正在返回一个操作对象，并且在该操作对象中，您具有type和payload的属性。

为了能够将动作创建者变成可以返回功能而不是动作对象的动作创建者，您需要确定是否要安装像redux-thunk这样的中间件并将其纳入组合。 / p>

正是从该库中，我们获得了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作为参数，因为如果您不需要它，那么请不要定义它，但是如果您使用VS Code，则应该有一条弯弯曲曲的线条向您尖叫表示您没有使用过自变量，或者应将getState阴影掉，以表明您没有在任何地方使用过，这是一个线索，如果您不打算使用它，请忽略掉它。

用调度替换退货会导致错误

3 个答案: