简单使用Reducer进行学习答案

【问题标题】：simple useReducer for learning简单使用Reducer进行学习
【发布时间】：2021-02-18 10:05:02
【问题描述】：

我正在从官方网站学习 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;

【问题讨论】：

你添加const initialState = {count: 0};了吗？
不，我没有，initialState 是否需要包含我们通过 reducer 传递的所有值？
不，但在您的情况下，您正在使用状态的增量/减量。所以state.count的必备初始值
“initialState 是否需要包含我们通过 reducer 传递的所有值？”作为最佳实践，是的。 @Muhammad 在技术上是正确的，在某些情况下您可以摆脱不完整的初始状态。但根据经验，“initialState 应该包含您传递给 reducer 的所有值”是一个非常可靠的指南。

标签： reactjs use-reducer

【解决方案1】：

你应该通过你的初始状态，看下面的sn-p。

 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;

【讨论】：

谢谢！我明白了，这就像在第一次渲染时使用的默认状态？我假设当我们更改值时 useReduce 会重新渲染？
是 @Norby ，基本上该方法通过 useReducer 触发和捕获并调度更新的状态。如果它帮助您投票并接受，那么它将有助于将来的参考:)

【解决方案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
  }
};

【讨论】：

【解决方案3】：

这样做更好地创建一个单独的文件，并按照你想要的方式调用它前 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;

【讨论】：

您确定您的示例有效吗？