Question

我正在使用redux-thunk和superagent npm进行jwt身份验证，我想知道如何在action.js文件而不是在reducer.js主文件中使用thunk-middleware来实现后期调用。

Answer 1

有两种不同的处理方法，但是我个人喜欢使用axios库。 Axios本质上只是协助提出API请求并将数据从API解析回json。

在您的actions.js文件中。

export const authenticateUser = () => {
 return (dispatch, getState) => {
    //get the token from the reducer 
    const jwtToken = getState().jwtTokenReducer.tokenKey
    axios.post("/api/authenticate-user", jwtToken) //jwtToken passed into request
       .then((res) =>){
           dispatch({
              type: "AUTHENTICATE_USER",
              payload: res.data
           })
       }
       .catch((errors) => {
            dispatch({
               type: "ERRORS",
               payload: errors.response.data
            })
        })
 }
}

因此，请看一下上面的语法。通常，在定义动作创建者时，会设置一个返回动作（对象）的函数。但是由于redux-thunk的帮助，您现在可以设置动作创建者以使用dispatch作为参数返回函数。

因此，在返回的函数中，您可以定义某些逻辑，例如像我们在此处那样向API发出请求。然后，我们可以使用.then Promise处理程序获取这些数据，并将其用作有效载荷的操作，该操作将显式分派给我们的reducer。

如何在react-redux中使用thunk中间件实现post api调用？

1 个答案: