reactjs - React useReducer 没有从其他组件中获取新的调度值

Question

我正在尝试使用减速器来更新我正在构建的 React/Typescript 应用程序的进度条。我正在使用 useReducer 钩子。

我有一个进度条位于标题中，我试图“监听”减速器状态并使用为其提供的正确进度条值重新渲染。但目前，“订阅者”组件（可以这么说）没有获取更新的值。我知道值正在reducer 中更新和接收，因为当我在reducer 中注销操作时，我可以在它们中看到它。这是我的代码：

减速器：

import ProgressBarTitleEnum from '../lib/enums/progressBarTitleEnum';

export const UPDATE_PROGRESS_BAR = 'updateProgressBar';

export interface IProgressBarState {
  name: string;
  value: number;
}

interface IAction {
  type: string;
  payload: IProgressBarState;
}

export const initialState: IProgressBarState = {
  name: ProgressBarTitleEnum.INVESTOR_PROFILE,
  value: 0,
};

export const reducer = (state = initialState, action: IAction): IProgressBarState => {
  switch (action.type) {
    case UPDATE_PROGRESS_BAR:
      return {
        ...initialState,
        name: action.payload.name,
        value: action.payload.value,
      };
    default:
      return state;
  }
};

export function updateProgressBarAction(progressBarPayload: IProgressBarState): IAction {
  return {
    type: UPDATE_PROGRESS_BAR,
    payload: progressBarPayload,
  };
}

分发动作的组件

import MainLayout from '../../components/layout/MainLayout';
import {
  initialState as progressBarState,
  reducer as progressBarReducer,
  updateProgressBarAction,
} from '../../reducers/progressBarReducer';
import ProgressBarTitleEnum from '../../lib/enums/progressBarTitleEnum';

interface IStepsCompletedInterface {
  investmentStyle: boolean;
  investmentPeriod: boolean;
  investmentRange: boolean;
  investmentAmount: boolean;
}

export default function InvestorProfile(): JSX.Element {
  const [progressBarStore, progressBarDispatch] = useReducer(progressBarReducer, progressBarState);

  useEffect(() => {
    progressBarDispatch(
      updateProgressBarAction({
        name: ProgressBarTitleEnum.INVESTOR_PROFILE,
        value: 1,
      }),
    );
  }, []);

而progressBar组件就是监听状态变化并相应渲染：

import { initialState as progressBarState, reducer as progressBarReducer } from '../../reducers/progressBarReducer';

// Can probably move it to react context
export default function ProgressBar(): JSX.Element {
  const [progressBarStore, progressBarDispatch] = useReducer(progressBarReducer, progressBarState);
  const isMobile = useMediaQuery({
    query: `(max-device-width: ${mediaQueriesMap.get('mobile')}px)`,
  });

  console.log(progressBarStore);

  const markUp = (
    <div style={styles.container}>
      {Array(4)
        .fill(0)
        .map((_, i) => {
          let circleMarkup;

          if (progressBarStore.value === i) {
            circleMarkup = (

任何人都可以为什么在进度条组件中没有获取更新的状态？另外，我是否需要创建一个局部状态变量来保存更改并与进度条组件中的 useEffect 结合以导致渲染，还是 useReducer 导致重新渲染？谢谢

标签： reactjstypescriptstateuse-reducer