Redux 中间件内部的功能不起作用

Question

我正在尝试制作一些中间件，如果它过期会刷新我的 JWT。我目前有这个中间件：

import { isTokenExpired, refreshToken } from '../modules/auth/auth.service'
export const jwt = store => next => action => {
    if (typeof action === 'function') {
      console.log("Middleware triggered:", action);
      var theState = store.getState();
      if (theState.auth && theState.auth.authToken && isTokenExpired(theState.auth.authToken)) {
        console.log('This is logging')
        //this function is not being called
        refreshToken(theState.auth.refreshToken);
      }
    }
    return next(action)
}

我希望调用将启动进程的 refreshToken() 函数，但到目前为止，即使是 refreshToken 中的 console.log() 也没有调用：

export const refreshToken = (refreshToken) => dispatch => {
  console.log('Not logging')
}

此外，refreshToken 函数在刷新令牌时将是异步的。我正在考虑在减速器中设置一个 "REFRESH_TOKEN_PENDING" 类型，一旦收到响应就将 "REFRESH_TOKEN_SUCCESS" 发送到减速器。中间件可以实现吗？

谢谢

Answer 1

您必须派遣refreshToken()。如果您确实有权将 dispatch() 访问到 jwt 函数中，您应该像 dispatch(refreshToken()).

那样调用它

考虑到我不确定您是如何触发 jwt 操作的，我认为这是一个有效的解决方案，可以帮助您轻松触发操作中的中间件功能：

// ================
//  Container file
// ================
import {connect} from "react-redux";
import { bindActionCreators } from "redux";
// ... other 

function mapActionsToProps(dispatch) {
  return bindActionCreators({
    jwt: path_to_actions_file.jwt
}, dispatch)}

const mapStateToProps = (state) => ({
  // ... your state properties
});

export default connect(mapStateToProps, mapActionsToProps)(YourComponent); // <== YourComponent has to be a React Component

// ==============
//  Actions file
// ==============
export const setConvertTypeActive = store => dispatch => {
  console.log('This is logging.');
  dispatch(refreshToken("md5Token"));
}

export const refreshToken = refreshToken => dispatch => {
  console.log('Should log now.');
}

关于你的最后一个问题，是的，你可以创建类似于 refreshToken 操作的中间件，用于在 reducer 上设置一些状态。检查下面的代码：

// ============== 
//  Actions file
// ==============
export const refreshToken= {
  pending: () => ({
    // "REFRESH_TOKEN_PENDING"
  }),
  success: (data) => ({
    // "REFRESH_TOKEN_SUCCESS"
  })  
};

Redux 中间件内部的功能不起作用

Function inside of Redux middleware not working

middleware

reactjs

redux

redux-thunk