如何在React-Redux中间件中不使用超时使代码同步

Question

我试图调度一个动作，并使用中间件来检查令牌是否过期，如果过期，我正在生成新令牌。 然后，我在api中使用这个新令牌。 问题是代码异步流动。 api使用的是旧令牌，而不是生成的新令牌。 请帮助我解决问题。 注意-中间件代码在index.js文件中

this.props.checkToken(oldToken) //action dispatched goes to middleware
apicall(window.sessionSTorage.getItem('token')) //api using token

const mapDispatchToProps = (dispatch) => {
    return {
      checkToken: (token) => dispatch (actionCreators.checkToken(token))
    }
}

export default connect(null, mapDispatchToProps)(myComponent)

动作创作者-

export const checkToken = (token) => {
return {
    type: actionTypes.checkToken,
    token: token,
}}

中间件-

//Middleware code here
const logger = store => {
    return next => {
        return action => {
            if (tokenExpired) {
                fetch (url, {
                   method: 'POST',
                   body: JSON.stringify(refresh),
                   headers: {
                      'Content-Type': 'application/json',
                   }
                })
                .then ((response) => response.json())
                .then ((findresponse) => {
                     window.sessionStorage.setItem('token', findresponse.token);
                })
            }

            return next(action);
       }
   }}

Answer 1

行动将兑现承诺，因此您可以在成功完成承诺时做到apicall

this.props.checkToken(oldToken).then(()=>apicall(window.sessionSTorage.getItem('token'))

或使用异步/等待

await this.props.checkToken(oldToken) //action dispatched goes to middleware
apicall(window.sessionSTorage.getItem('token')) //api using token

Answer 2

我认为您的问题有很多解决方案（编辑中间件或使用RXJS订阅或创建另一个中间件来处理令牌...），但是我认为这不是一个好习惯。 这是因为我们不需要将动作分派到checktoken 。

它应由在每个请求之前或更改位置路径时运行的request中间件完成。 您的解决方案还会导致刷新令牌和用新请求重新调用现有请求的困难。