javascript - 从请求中分派(dispatch) redux 操作的正确方法

Question

我正在使用 redux-thunk 并且执行以下操作:

export const fetchUserInfo = () => dispatch => {
  return fetchCurrentUser()
    .then(user => {
      dispatch(retrieveUser(user));

      if (user && user.settings && user.settings.storePageId) {
        dispatch(getStoreById(user.settings.storePageId));
      }

      return user;
    })
    .catch(err => {
      console.error('Fetching userinfo failed', err);
      return Promise.reject(err);
    });
};

fetchCurrentUser 是一个 API 调用，定义如下:

export const fetchCurrentUser = () => authenticatedRequest('/customer');

这是我的身份验证请求:

import { logoutUser } from '../../actions/auth';
export const authenticatedRequest = (url, opts = {}, req = request) => {
  if (!cachedTokenType || !cachedAccessToken) {
    logoutUser() // I want this to happen!! :(

    return Promise.reject(
      new Error(
        'Missing token_type & access_token needed to perform this request'
      )
    );
  }

  const headers = { ...defaultOpts.headers, ...(opts.headers || {}) };

  const authedOpts = {
    ...opts,
    headers: {
      ...headers,
      Authorization: `${cachedTokenType} ${cachedAccessToken}`
    }
  };

  return req(url, authedOpts);
};

我希望能够在我的authentiatedRequest函数中调度logoutUser()，这样我就不必在使用authentiatedRequest的所有地方重复这个逻辑。我的问题是我不知道如何从另一个文件调用 redux 操作，并且不在带有 connect 的 React 组件中。

Answer 1

我希望能够在我的authentiatedRequest函数中调度logoutUser()...

我想说，通过实现这一点，authenticatedRequest 所做的不仅仅是一件事(验证用户身份并可能注销用户)。随着时间的推移，如果您想将 redux-thunk 更改为其他内容，复杂性可能会增加并变得最糟糕。

如果您仍然需要它，您可以传播dispatch，以便您可以分派(dispatch)其他操作:

const fetchCurrentUser = (dispatch) => authenticatedRequest(dispatch, '/customer')

const authenticatedRequest = (dispatch, url, opts = {}, req = request) => {
  if (YOUR_CONDITION) {
    dispatch(logoutUser())
  }
  ...
}

我个人不会这样做，因为它会将 dispatch 暴露给外部调用。但这是你的选择:)

是否可以在 fetchUserInfo 操作中处理 logoutUser？

const authenticatedRequest = (url, opts = {}, req = request) => {
  if (YOUR_CONDITION) {
    return Promise.reject('LOGOUT')
  }
  ...
}

const fetchUserInfo = () => dispatch => {
  return fetchCurrentUser()
    .then(user => {
      ...
    })
    .catch(err => {
      if (err === 'LOGOUT') {
        dispatch(logoutUser())
      }
    })
}