简单使用Reducer进行学习

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

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 2

您应该通过您的初始状态，请参阅以下代码段。

 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 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;

简单使用Reducer进行学习

simple useReducer for learning

reactjs

use-reducer