1
const [state, dispatch] = useReducer(reducer, initialArg, init?);

1
function init(initialCount) {
2
  return { count: initialCount, step: 1 };
3
}
4

5
function reducer(state, action) {
6
  switch (action.type) {
7
    case 'increment':
8
      return { ...state, count: state.count + state.step };
9
    case 'setStep':
10
      return { ...state, step: action.payload };
11
    default:
12
      throw new Error('未知的 action type');
13
  }
14
}
15

16
function Counter() {
17
  const [state, dispatch] = useReducer(reducer, 0, init);
18
  // ...
19
}

1
import { useReducer } from 'react';
2

3
// 定义 reducer 函数
4
function reducer(state, action) {
5
  switch (action.type) {
6
    case 'increment':
7
      return { count: state.count + 1 };
8
    case 'decrement':
9
      return { count: state.count - 1 };
10
    case 'reset':
11
      return { count: action.payload }; // 重置为指定值
12
    default:
13
      throw new Error(`未处理的 action type: ${action.type}`);
14
  }
15
}
16

17
function Counter() {
18
  // 初始化状态，调用 useReducer
19
  const [state, dispatch] = useReducer(reducer, { count: 0 });
20

21
  return (
22
    <div>
23
      <p>当前计数: {state.count}</p>
24
      {/* 派发 action 触发状态更新 */}
25
      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
26
      <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
27
      <button onClick={() => dispatch({ type: 'reset', payload: 0 })}>重置</button>
28
    </div>
29
  );
30
}
31

32
export default Counter;

1
import { useReducer } from 'react';
2

3
const initialState = {
4
  username: '',
5
  password: '',
6
  rememberMe: false
7
};
8

9
function formReducer(state, action) {
10
  switch (action.type) {
11
    case 'UPDATE_FIELD':
12
      return {
13
        ...state,
14
        [action.field]: action.value
15
      };
16
    case 'RESET_FORM':
17
      return initialState;
18
    default:
19
      return state;
20
  }
21
}
22

23
function LoginForm() {
24
  const [formState, dispatch] = useReducer(formReducer, initialState);
25

26
  const handleChange = (e) => {
27
    const { name, value, type, checked } = e.target;
28
    // 适配 checkbox 的 checked 属性
29
    const fieldValue = type === 'checkbox' ? checked : value;
30
    dispatch({
31
      type: 'UPDATE_FIELD',
32
      field: name,
33
      value: fieldValue
34
    });
35
  };
36

37
  const handleReset = () => {
38
    dispatch({ type: 'RESET_FORM' });
39
  };
40

41
  return (
42
    <form>
43
      <div>
44
        <label>用户名:</label>
45
        <input
46
          type="text"
47
          name="username"
48
          value={formState.username}
49
          onChange={handleChange}
50
        />
51
      </div>
52
      <div>
53
        <label>密码:</label>
54
        <input
55
          type="password"
56
          name="password"
57
          value={formState.password}
58
          onChange={handleChange}
59
        />
60
      </div>
61
      <div>
62
        <label>
63
          <input
64
            type="checkbox"
65
            name="rememberMe"
66
            checked={formState.rememberMe}
67
            onChange={handleChange}
68
          />
69
          记住我
70
        </label>
71
      </div>
72
      <button type="button" onClick={handleReset}>重置</button>
73
    </form>
74
  );
75
}
76

77
export default LoginForm;