React useReducer的输出

我是一年级的専門学校生Naoyuki。为了进行React学习的输出，我想第一次写一篇文章。

useReducer是什么?

一个用于状态管理的 React Hooks。它被用于管理比 useState 更复杂的逻辑。

成品

import { useReducer } from "react";

const reducer = (state, { type, payload }) => {
  switch (type) {
    case "change":
      return { ...state, [payload.name]: payload.value };
    default:
      return state;
  }
};

const Example = () => {
  const [state, dispatch] = useReducer(reducer, { a: 0, b: 0 });

  const ChangeHandler = (e) => {
    dispatch({
      type: "change",
      payload: { name: e.target.name, value: e.target.value },
    });
  };

  return (
    <>
      <div>
        a:
        <input type="text" value={state.a} name="a" onChange={ChangeHandler} />
      </div>
      <div>
        b:
        <input type="text" value={state.b} name="b" onChange={ChangeHandler} />
      </div>
      <h1>
        a:{state.a}
        <br></br>
        b:{state.b}
      </h1>
    </>
  );
};

export default Example;

说明

导入 useReducer。

import { useReducer } from "react";

定义 useReducer

在state中包含了{a: 0, b: 0}
通过dispatch()调用reducer函数

const [state, dispatch] = useReducer(reducer, { a: 0, b: 0 });

定义输入元素

将”value”分别赋值为state中的”a”和”b”，
将”name”赋值为”a”和”b”，
在”onChange”中调用ChangeHandler函数。

    <>
      <div>
        a:
        <input type="text" value={state.a} name="a" onChange={ChangeHandler} />
      </div>
      <div>
        b:
        <input type="text" value={state.b} name="b" onChange={ChangeHandler} />
      </div>
      <h1>
        a:{state.a}
        <br></br>
        b:{state.b}
      </h1>
    </>

定义一个 ChangeHandler 函数。

据说通常使用dispatch()调用reducer函数，将type和payload作为参数以对象的形式进行传递。
type用于描述操作的内容
payload用于以对象的形式描述执行该操作所需的值。

  const ChangeHandler = (e) => {
    dispatch({
      type: "change",
      payload: { name: e.target.name, value: e.target.value },
    });
  };

定义reducer函数

使用state获取当前a和b的值
changeHandler中的值将存储在type和payload中
如果type为”change”，则通过扩展运算符返回当前state，并更新接收到的name和value的值

使用state获取当前a和b的值
将ChangeHandler中的值存储在type和payload中
如果type为”change”，则使用扩展运算符返回当前state，并更新接收到的name和value的值

使用state获取当前a和b的值
type和payload将包含ChangeHandler中的值
如果type为”change”，则通过扩展运算符返回当前state，并更新接收到的name和value的值

使用state获取当前a和b的值
ChangeHandler中的值将赋予type和payload
如果type为”change”，则通过扩展运算符返回当前state，并修改接收到的name和value的值

const reducer = (state, { type, payload }) => {
  switch (type) {
    case "change":
      return { ...state, [payload.name]: payload.value };
    default:
      return state;
  }
};