链接Redux动作

时间:2016-12-17 16:24:25

标签: javascript reactjs redux redux-thunk

我是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)
            })
    }
    

问题是如何才能正确执行。那么正确的方法是什么?

1 个答案:

答案 0 :(得分:2)

如果您想以链式方式发送动作,您实际上可以自己实施。

现在说分析一下,你拿笔和纸开始写基本算法,看看它应该如何工作,你想出了以下内容: -

val

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

所以,即使你试图创造自己的东西来做你的学习,但最终你会想出像thunk或者其他一些包的东西。

我真的要说试试redux-thunk。对于中间件的理解,我建议您查看redux middleware docs