Question

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

通常，当我希望发送操作时，我将执行以下操作：

我将调度功能映射到组件的道具：

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

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

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

但是，现在我希望从axiosinterceptor对象内部调用调度函数，并且它们没有“道具”

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

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);

当然，以上内容会给我一个错误，因为它不是类，所以未定义。我能知道在这种情况下使用redux的正确方法吗？

Answer 1

您可以利用store.dispatch从组件或动作创建者外部调度动作

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);
  }
);

在axiosinterceptor（非反应组件）中分派redux动作

1 个答案: