将 API 中间件与 Redux-Thunk 集成

Question

我正在尝试将 redux-thunk 与我的 API 中间件集成。目前的逻辑流程是这样的：

从组件 this.props.onVerifyLogin();

调度的动作

=>

action 转到 action creator，后者创建对中间件的 API 调用，如下所示：

// imports

const verifyLoginAC = createAction(API, apiPayloadCreator);

export const verifyLogin = () => dispatch => {
  return verifyLoginAC({
    url: "/verify/",
    method: "POST",
    data: {
      token: `${
        localStorage.getItem("token")
          ? localStorage.getItem("token")
          : "not_valid_token"
      }`
    },
    onSuccess: result => verifiedLogin(dispatch, result),
    onFailure: result => dispatch(failedLogin(result))
  });
};

const verifiedLogin = (dispatch, data) => {
  console.log("verifiedLogin");
  const user = {
    ...data.user
  };
  dispatch(setUser(user));
  dispatch({
    type: IS_LOGGED_IN,
    payload: true
  });
};

// failedLogin function

const setUser = createAction(SET_USER);

apiPayloadCreator in utils/appUtils:

const noOp = () => ({ type: "NO_OP" });

export const apiPayloadCreator = ({
  url = "/",
  method = "GET",
  onSuccess = noOp,
  onFailure = noOp,
  label = "",
  isAuthenticated = false,
  data = null
}) => {
  return {
    url,
    method,
    onSuccess,
    onFailure,
    isAuthenticated,
    data,
    label
  };
};

然后中间件拦截并执行实际的 API 调用： // 导入 // axios 默认配置

const api = ({ dispatch }) => next => action => {
  next(action);
  console.log("IN API");
  console.log("Action: ", action);
  // this is where I suspect it is failing. It expects an action object
  // but is receiving a function (see below for console.log output)
  if (action.type !== API) return;

  // handle Axios, fire onSuccess/onFailure, etc

动作已创建，但它是一个函数而不是动作创建者（我知道这是为 redux-thunk 而设计的）。但是当我的 API 去检查 action.type 它不是 API 所以它 returns，从来没有真正做任何事情包括调用 onSuccess 函数。我也尝试在 applyMiddleware 中的 api 之前添加 redux-thunk，但随后我的 API 操作的 none 被触发。有人可以帮忙吗？

编辑：

这是API中间件收到的数据：

ƒ (dispatch) {
    return verifyLoginAC({
      url: "/verify/",
      method: "POST",
      data: {
        token: "" + (localStorage.getItem("token") ? localStorage.getItem("token") : "not_valid_toke…

状态更新：

仍然无法正常工作。 redux-saga 似乎也有不错的追随者，我应该试试吗？

Answer 1

我的 API 正在干扰。我切换到 redux-saga 并且一切正常：

/**
 * Redux-saga generator that watches for an action of type
 * VERIFY_LOGIN, and then runs the verifyLogin generator
 */
export function* watchVerifyLogin() {
  yield takeEvery(VERIFY_LOGIN, verifyLogin);
}

/**
 * Redux-saga generator that is called by watchVerifyLogin and queries the
 * api to verify that the current token in localStorage is still valid.
 * IF SO: SET loggedIn = true, and user = response.data.user
 * IF NOT: SET loggedIn = false, and user = {} (blank object}
 */
export function* verifyLogin() {
  try {
    apiStart(VERIFY_LOGIN);
    const token = yield select(selectToken);
    const response = yield call(axios.post, "/verify/", {
      // use redux-saga's select method to select the token from the state
      token: token
    });
    yield put(setUser(response.data.user));
    yield put(setLoggedIn(true));
    apiEnd(VERIFY_LOGIN);
  } catch (error) {
    apiEnd(VERIFY_LOGIN);
    yield put(setLoggedIn(false));
    yield put(setUser({})); // SET USER TO BLANK OBJECT
  }
}

将 API 中间件与 Redux-Thunk 集成

Integrating API middleware with Redux-Thunk

reactjs

redux

redux-thunk