react学习笔记12 useReducer

useReducer 是 React Hooks 中的一个高级 Hook，它用于管理组件中的复杂状态逻辑。与 useState 不同，useReducer 允许你使用 reducer 函数来处理状态更新，这非常适合处理涉及多个状态变量或复杂状态逻辑的情况。

useReducer 的基本用法

import React, { useReducer } from 'react';  
  
// 定义初始状态  
const initialState = {  
    count: 0,  
    loading: false,  
    error: null  
};  
  
// 定义 reducer 函数  
function reducer(state, action) {  
    switch (action.type) {  
        case 'INCREMENT':  
        return { ...state, count: state.count + 1 };  
        case 'DECREMENT':  
        return { ...state, count: state.count - 1 };  
        case 'LOADING':  
        return { ...state, loading: true };  
        case 'ERROR':  
        return { ...state, error: action.error, loading: false };  
        default:  
        throw new Error();  
    }  
}  
  
// 定义组件  
function Counter() {  
    const [state, dispatch] = useReducer(reducer, initialState);  

    const increment = () => {  
    dispatch({ type: 'INCREMENT' });  
    };  

    const decrement = () => {  
    dispatch({ type: 'DECREMENT' });  
};  
  
const loadSomething = async () => {  
try {  
    dispatch({ type: 'LOADING' });  
    // 模拟异步操作  
    await new Promise(resolve => setTimeout(resolve, 2000));  
    dispatch({ type: 'INCREMENT' });  
    } catch (error) {  
    dispatch({ type: 'ERROR', error: error.message });  
}  
};  
  
return (  
    <div>  
        <h1>Counter: {state.count}</h1>  
        <button onClick={increment}>Increment</button>  
        <button onClick={decrement}>Decrement</button>  
        <button onClick={loadSomething}>Load Something</button>  
        {state.loading && <p>Loading...</p>}  
        {state.error && <p>Error: {state.error}</p>}  
    </div>  
    );  
}  
  
export default Counter;  

说明

1. 定义初始状态：使用一个对象来定义初始状态，可以包含多个状态变量。
2. 定义 reducer 函数：这是一个纯函数，接受当前状态和一个动作作为参数，并返回一个新的状态对象。通常，reducer 会根据不同的动作类型来更新状态的不同部分。
3. 使用 useReducer：这个 Hook 返回当前状态和一个 dispatch 函数。你可以使用 dispatch 函数来发送动作，进而更新状态。
4. 处理状态更新：你可以根据状态的变化来渲染不同的 UI。

例子解释

在这个示例中，我们定义了一个计数器组件，它可以增加和减少计数。此外，还有一个 loadSomething 函数，它模拟了一个异步加载过程。在加载过程中，状态会变为 loading，并且在成功或失败后更新状态。

**总结 **

useReducer：适合处理复杂的状态逻辑，特别是当状态更新依赖于先前的状态时。

reducer 函数：一个纯函数，负责根据动作类型更新状态。

dispatch 函数：用于发送动作，从而更新状态。