Question

仍然习惯这个。

我已经查看了问题here和here，我仍然对如何解决此问题感到不安。从我的角度来看，这些并不清楚。

基本上我点击了＆＃34;登录＆＃34;按钮并已请求JWT登录令牌并成功接收它。我注意到的是，我现在可以下载那些很少更改的列表，例如状态或郊区/邮政编码很大（后者），应该立即使用spa，而不是将其添加到呼叫中。客户端。

我想在成功接收令牌后立即对这些列表执行API调用并将其存储在本地存储中。没有＆＃34;事件＆＃34;在JWT成功撤退后，它应该直接开火......

以下是在反应中检索JWT的行动：

export const requestLoginToken = (username, password) =>
  (dispatch, getState) => {
    dispatch({type: REQUEST_LOGIN_TOKEN, payload: username})

    const payload = {
      userName: username,
      password: password,
    }

    const task = fetch('/api/jwt', {
      method: 'POST',
      body: JSON.stringify(payload),
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      },
    })
      .then(handleErrors)
      .then(response => response.json())
      .then(data => {
        dispatch({type: RECEIVE_LOGIN_TOKEN, payload: data})
        saveJwt(data)
      })
      .catch(error => {
        clearJwt()
        dispatch({type: ERROR_LOGIN_TOKEN, payload: error.message})
      })
    addTask(task)
    return task
  }

我相信添加第二个API调用的地方将是＆＃34; saveJwt（）＆＃34;但是如何。

是否可以将其发送到应用程序另一部分中的另一个导出const动作/函数？

如果我写了类似的东西，并将函数的名称放入＆＃34; JWT＆＃34;的参数中。例如

.then(retrieveSelectData)

它将使用该导出函数进入该单独的文件夹，并在应用调度的同时执行API调用...然后返回..

如果这是一个正确合理的方式将两个API调用作为一个，那么可能会有人概述。我仍然需要获得JWT（并在第二次使用它）所以我不能在没有第一个的情况下进行第二次呼叫。

Answer 1

如果我正确理解你的目标，你需要的是一个中间件，它将捕获在减速器捕获它们之前发送的所有actions并且可以接受功能并保留一个参考调度员。
请注意，reducers只能接受作为普通对象的actions，并且不能接受函数。

输入redux-thunk，这是一个只用11行代码就可以做到这一点的中间件。
它捕获所有操作（在缩减器之前）并检查是否action === 'function' 如果它是function，那么它将调用function并将调度作为参数如果它不是一个功能，它将不管它，让reducers完成它们的工作。

这样的事情：

function loadSomeThings() {
    return dispatch => {
        fetchFirstThingAsync.then(data => { // first API call
            dispatch({ type: 'FIRST_THING_SUCESS', data }); // you can dispatch this action if you want to let reducers take care of the first API call
            return fetchSecondThingAsync(data), // another API call with the data received from the first call that returns a promise
        })
        .then(data => {
             dispatch({ type: 'SECOND_THING_SUCESS', data }); // the reducers will handle this one as its the object they are waiting for
        });
    };
}

React / Redux链接第二个API请求并发送

1 个答案: