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

Posted 2023-02-22

【中文标题】从请求中分派 redux 操作的正确方法

【英文标题】：Correct way to dispatch redux action from request

【发布时间】：2019-03-08 20:03:59

【问题描述】：

我正在使用 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 操作，以及何时不在带有连接的反应组件中。

【参考方案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())
      
    )

【讨论】：

通过不在经过身份验证的请求中执行此操作，我将需要编写逻辑以使用 authenticatedRequest 注销所有操作，如果一位同事忘记回退到它，我们会得到不一致的令牌过期时间。谢谢你的帮助，我会试试你的代码:=)

您如何看待检查所有操作的令牌的中间件？