从请求中分派 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);
};

我希望能够在我的 authenticatedRequest 函数中调度 logoutUser()，这样我就不必在所有使用 authenticatedRequest 的地方重复这个逻辑。我的问题是我不知道如何从另一个文件调用 redux 操作，以及何时不在带有连接的反应组件中。

Answer 1

I want to be able to dispatch logoutUser() in my authenticatedRequest func...

我想说，通过实现这一点，authenticatedRequest 做的不止一件事（验证并可能注销用户）。随着时间的推移，复杂性可能会增加，并且在您想将 redux-thunk 更改为其他内容的情况下变得更糟。

如果您仍然需要它，您可以传播 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())
      }
    })
}

从请求中分派 redux 动作的正确方法

Correct way to dispatch redux action from request

javascript

ecmascript-6

reactjs

redux

redux-thunk