简单的学习useReducer

Question

我正在从官方网站学习useReducer，我的代码不能正常工作，我不确定initialCount应该如何工作。任何帮助都将不胜感激！

import React, { useReducer } from "react";

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

const UseReduceExample = () => {
  const [state, dispatch] = useReducer(reducer, initialCount );

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
};

export default UseReduceExample;

Answer 1

您应该传递您的初始状态，请参见下面的片段。

 import React, { useReducer } from "react";


const initialState = {
  count: 0
};

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

const UseReduceExample = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </>
  );
};

export default UseReduceExample;

Answer 2

const initState = {
   count: 0
}
const reducer = (state=initState, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state
  }
};

Answer 3

这样做更好，创建一个单独的文件，并称它为您想要的ex MainStore。然后添加这样的状态逻辑：

import React, { createContext, useReducer, useEffect } from 'react';

export const MainContext = createContext({});

export const initialState = {
  increment:'',
  decrement:''

};

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('Action type must be defined');
  }
}

const MainStore = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <MainContext.Provider value={{ state, dispatch }}>
      {children}
    </MainContext.Provider>
  );
};

export default MainStore;

然后像这样包装使用这种状态的每个组件。

    <MainStore>
      <UseReduceExample  />
      <AnotherComponent />
    </MainStore>

    And to use state and dispatch inside those components do it like this.

      import React, {useContext} from 'react'
      import { MainContext } from 'path/to/store/MainStore';
    
      const UseReduceExample = () => {
      const [state, dispatch] = useContext(MainStore);
    
      return (
        <>
          Count: {state.count}
          <button onClick={() => dispatch({ type: "increment" })}>+</button>
        </>
      );
    };

export default UseReduceExample;