Используя React's Hooks useReducer, состояние не является "единственным источником истины"? Как приложение или сестра узнают состояние других компонентов?

Question

Я попробовал пример кода useReducer:

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  // ...

и создали 3 счетчика в приложении. Образец на: https://codesandbox.io/s/serene-morse-c017r

Итак, кажется, что состояние является локальным для каждого компонента Counter, а не является "единственным источником истины", как в Redux? Если приложение хочет получить значение всех счетчиков или один счетчик хочет получить значение другого счетчика, как это сделать?

Answer 1

Я внес изменения в ваш файл codeandbox и использовал контекст, чтобы сделать ваш счетчик единственным источником истины, таким как redux.

import React from "react";
const CountStateContext = React.createContext();
const CountDispatchContext = React.createContext();
function countReducer(state, action) {
  switch (action.type) {
    case "increment": {
      return { count: state.count + 1 };
    }
    case "decrement": {
      return { count: state.count - 1 };
    }
    default: {
      throw new Error(`Unhandled action type: ${action.type}`);
    }
  }
}
function CountProvider({ children }) {
  const [state, dispatch] = React.useReducer(countReducer, { count: 0 });
  return (
    <CountStateContext.Provider value={state}>
      <CountDispatchContext.Provider value={dispatch}>
        {children}
      </CountDispatchContext.Provider>
    </CountStateContext.Provider>
  );
}
function useCountState() {
  const context = React.useContext(CountStateContext);
  if (context === undefined) {
    throw new Error("useCountState must be used within a CountProvider");
  }
  return context;
}
function useCountDispatch() {
  const context = React.useContext(CountDispatchContext);
  if (context === undefined) {
    throw new Error("useCountDispatch must be used within a CountProvider");
  }
  return context;
}
export { CountProvider, useCountState, useCountDispatch };

https://codesandbox.io/s/modern-wildflower-ihvjj