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

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

0 голосов
/ 14 февраля 2020

Я попробовал пример кода 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? Если приложение хочет получить значение всех счетчиков или один счетчик хочет получить значение другого счетчика, как это будет сделано?

1 Ответ

1 голос
/ 14 февраля 2020

Я внес изменения в ваши коды и коробку и использовал контекст, чтобы сделать ваш счетчик единым источником правды, например, избыточным. 

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

...