reactjs - 在 axiosinterceptor 中调度 redux Action (非 react 组件)

Question

是否可以从不属于 react 组件的 javascript 对象调度 redux 函数？

通常当我想调度一个 Action 时，我会做以下事情:

我会将 dispatch 函数映射到组件的 props :

const mapDispatchToProps = dispatch => {
  return {
    autoCheckState: () => dispatch(actions.authCheckState()),
  }
}

然后我可以像这样调用调度函数:

  async componentDidMount() {
    await this.props.autoCheckState();
    this.setState({
      checking:false
      })
  }

但是，现在我希望从我的 axiosinterceptor 对象中调用调度函数，并且它们没有“ Prop ”

这是我设想的使用方法，但当然它不起作用:

axiosInstance.interceptors.response.use(
response => {
  return  response
},error => {

            ######## bunch of code that is not relevant ##########
            this.props.updateTokens(response.data.access,refreshToken)  #<--- how i would call it if i based it off the first example
            ######## bunch of code that is not relevant ##########
  return Promise.reject(error);
  }
);


const mapDispatchToProps = dispatch => {           ##<--- maping the dispatch to the 'props'
    return {
      updateTokens: () => dispatch(actions.authSuccess())
    }
  }


export default connect(mapStateToProps,mapDispatchToProps)(axiosInstance);

Ofcourse 以上会给我的错误，这没有定义，因为它不是一个类。我可以知道在这种情况下使用 redux 的正确方法吗？

Answer 1

您可以使用 store.dispatch 从组件或 Action 创建者外部分派(dispatch) Action

import store from '/path/to/store';

axiosInstance.interceptors.response.use(
response => {
  return  response
},error => {
      store.dispatch(actions.authSuccess(response.data.access,refreshToken));
  return Promise.reject(error);
  }
);