React+Redux+RxJS应用：如何在retryWhen中分发Redux Action

嘿，我明白你的困扰了——在RxJS的retryWhen逻辑里想更新Redux状态确实有点绕，不过其实用RxJS的操作符结合Redux的dispatch就能轻松解决！我给你一步步拆解可行的方案：

核心思路 #

我们需要在retryWhen的重试触发流程里，调用Redux的dispatch来发送“重试中”的action，而RxJS的tap操作符刚好能帮我们在流的执行过程中插入副作用（比如更新Store）。

步骤1：定义对应的Redux Action #

首先确保你有处理状态更新的action creators：

// actions.js
export const fetchDataRequest = () => ({ type: 'FETCH_DATA_REQUEST' }); // 加载中
export const fetchDataSuccess = (data) => ({ type: 'FETCH_DATA_SUCCESS', payload: data });
export const fetchDataFailure = (error) => ({ type: 'FETCH_DATA_FAILURE', payload: error });
export const retryingDataRequest = () => ({ type: 'RETRYING_DATA_REQUEST' }); // 重试中

步骤2：在组件中整合RxJS流与Redux Dispatch #

在你的App组件里，通过Redux的connect获取dispatch，然后在RxJS的流中插入状态更新的逻辑：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { interval, of } from 'rxjs';
import { switchMap, catchError, retryWhen, delay, tap } from 'rxjs/operators';
import { fetchDataRequest, fetchDataSuccess, fetchDataFailure, retryingDataRequest } from './actions';

// 替换成你实际的API请求函数，返回Observable
const fetchYourApiData = () => {
  return fetch('your-api-url')
    .then(res => res.json())
    .catch(err => Promise.reject(err));
};

class App extends Component {
  subscription = null;

  componentDidMount() {
    const { dispatch } = this.props;

    // 每5秒触发一次数据请求
    this.subscription = interval(5000)
      .pipe(
        switchMap(() => 
          // 先发送“加载中”的action，再发起API请求
          of(null).pipe(
            tap(() => dispatch(fetchDataRequest())),
            switchMap(() => fetchYourApiData()),
            catchError(error => {
              // 请求失败时发送“失败”action，然后把错误传入重试流
              dispatch(fetchDataFailure(error));
              return of(error); // 必须返回Observable，才能让retryWhen捕获到错误
            })
          )
        ),
        // 重试逻辑：每次重试前发送“重试中”action
        retryWhen(errors => 
          errors.pipe(
            tap(() => dispatch(retryingDataRequest())), // 这里更新Store状态为“重试中”
            delay(3000) // 自定义重试间隔，比如3秒后重试
          )
        ),
        // 请求成功时发送“成功”action
        tap(data => dispatch(fetchDataSuccess(data)))
      )
      .subscribe();
  }

  componentWillUnmount() {
    // 组件卸载时取消订阅，避免内存泄漏
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

  render() {
    const { dataStatus } = this.props;
    return (
      <div className="app-container">
        {/* 根据Store状态渲染对应指示器 */}
        {dataStatus === 'loading' && <div className="loader">加载中...</div>}
        {dataStatus === 'retrying' && <div className="retry-loader">重试中，请稍候...</div>}
        {/* 渲染数据内容 */}
      </div>
    );
  }
}

// 定义props类型
App.propTypes = {
  dispatch: PropTypes.func.isRequired,
  dataStatus: PropTypes.string.isRequired
};

// 从Store中获取当前数据状态
const mapStateToProps = state => ({
  dataStatus: state.data.status // 假设你的Store结构是state.data.status
});

// 连接Redux与组件
export default connect(mapStateToProps)(App);

关键细节说明 #

1. tap操作符的作用：在retryWhen的错误流里使用tap，可以在每次重试触发前执行dispatch(retryingDataRequest())，从而更新Redux Store的状态，视图就能同步显示“重试中”了。
2. 错误流的传递：在catchError里必须返回of(error)而不是直接抛出错误，这样错误才能进入retryWhen的流中，否则整个Observable会直接终止，无法触发重试。
3. 内存泄漏防护：组件卸载时一定要取消RxJS的订阅，避免不必要的API请求和状态更新。

对应的Reducer示例（供参考） #

为了让状态更新生效，你的Reducer需要处理这些action：

// reducer.js
const initialState = {
  status: 'idle',
  data: null,
  error: null
};

export const dataReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'FETCH_DATA_REQUEST':
      return {...state, status: 'loading', error: null};
    case 'RETRYING_DATA_REQUEST':
      return {...state, status: 'retrying'};
    case 'FETCH_DATA_SUCCESS':
      return {...state, status: 'success', data: action.payload};
    case 'FETCH_DATA_FAILURE':
      return {...state, status: 'failure', error: action.payload};
    default:
      return state;
  }
};

这样就能完美实现你想要的效果：每次请求显示加载指示器，失败时触发重试并更新状态为“重试中”，视图也会同步更新啦！

内容的提问来源于stack exchange，提问作者Joren De Maeyer