链接 Redux 操作

Question

我是 React、Redux 和 JS 的新手。我想知道如何在另一个完成后调度和行动 - 以正确的方式承诺。我的代码实际上有效，但它不断抛出错误：

readingActions.js?14b9:56 Uncaught (in promise) TypeError: dispatch(...).then is not a function(…)

这是我的设置。

• 这是我的动作创建者，我想要链接的动作以及发生警告的位置。

  export function createReading(reading) {
    return function (dispatch) {
      dispatch({type: CREATE_READING});
      return request(
        `${API_URL}new`, {method: 'POST', body:JSON.stringify(reading)},
        (json) => {( dispatch({type: CREATE_READING_SUCCESS, res: json}).then(dispatch(Notifications.success(showSuccess(json.book.title)))))},
        (json) => { dispatch({type: CREATE_READING_ERROR400, res: json}).then(dispatch(Notifications.error(showError(json.error)))) },
        (res) => { dispatch({type: CREATE_READING_ERROR500, res: res}) },
        (ex) => { dispatch({type: CREATE_READING_FAILURE, error: ex}) },
      )
    }
  }
  

如您所见，问题出在 .then 中，因为我不知道如何正确触发操作。

• 您还可以看到请求是我的辅助函数，看起来像这样（这里我附加令牌，返回不同的响应）：

  export function request(url, options, success, error400, error, failure) {
      let headers = new Headers();
      headers.append("Content-Type", "application/json")
      headers.append("Accept", "application/json")
      options["headers"] = headers;
  
       if (localStorage.jwtToken) {
          let token = localStorage.jwtToken;
          headers.append('Authorization', 'JWT '+token);
       }
  
      return fetch(url, options)
          .then(res => {
              if (res.status >= 200 && res.status < 300) {
                  res.json().then(json => {
                       return success(json)
                  })
              } else if (res.status === 400) {
                  res.json().then(json => {
                      return error400(json)
                  })
              } else {
                  return error(res)
              }
          }).catch((ex) => {
              return failure(ex)
          })
  }
  

问题是我如何正确执行 .then 以及正确的方法是什么？

Answer 1

如果你想在链中分派动作，你实际上可以自己实现它。

现在说在分析了一点之后，你拿起笔和纸开始编写它应该如何工作的基本算法，然后你想出了以下内容：-

dispatch(action) => action returns function => action returns function => action returns an object(here you chain ends)

现在从上面如果你看到你创建了一个中间件并继续分派返回函数的动作，直到你得到一个返回一个对象的动作。这就是redux-thunk所做的。

因此，即使您尝试创建自己的东西来学习，但最终您会想出类似 thunk 或其他一些包的东西。

我真的会说试试redux-thunk。另外，为了理解中间件，我建议你可以查看redux middleware docs。