Redux 是一个流行的状态管理库，它在前端开发中广泛使用。在早期的版本中，Redux 需要使用 class 组件和高阶组件等概念来实现状态管理。在近几年中，React 引入了函数组件，并且钩子(hooks)的出现，大大简化了 React 中的状态管理，Redux 也在 7.1.0 版本中推出了 Hooks，允许使用函数组件的方式来管理 Redux 状态。
1. Redux Hooks 的基础概念
Redux Hooks 包含两个基本概念：
（1）useSelector
useSelector 是一个 React 钩子函数，用于从 Redux 中选择和获取 state。它的基本用法是：
import { useSelector } from 'react-redux';
const myData = useSelector(state => state.data);这里我们传入一个回调函数 state => state.data，这个回调函数将会在 Redux store 中获取到全局的 state，并取出我们在 store 中存储的 data。
(2) useDispatch
useDispatch 用于获取 store 的 dispatch 函数，以便在我们的组件中调用 action 的创建函数以更新状态。示例：
import { useDispatch } from 'react-redux';
import { increment } from './actions';
const dispatch = useDispatch();
const incrementCounter = () => {
dispatch(increment());
}我们先导入 increment 函数（通常称为 action 的创建函数），然后使用 useDispatch() 钩子函数获取 dispatch 函数。最后，在需要更新状态的地方，我们就可以使用 dispatch 函数来触发 action 了，进而更新状态。
2. 使用示例
下面我们来演示一下如何在 React 中使用 Redux Hooks：
（1）创建 store
我们需要先创建一个 Redux store。这里我们使用一个简单的计数器示例：
// javascriptcn.com 代码示例
import { createStore } from 'redux';
const initialState = {
count: 0
};
function counterReducer(state = initialState, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}
const store = createStore(counterReducer);（2）在组件中使用 useSelector 和 useDispatch
现在我们需要在函数组件中使用 useSelector 和 useDispatch 钩子函数。下面是一个简单的计数器组件示例：
// javascriptcn.com 代码示例
import { useSelector, useDispatch } from 'react-redux';
function Counter() {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
const increment = () => {
dispatch({ type: 'increment' });
};
const decrement = () => {
dispatch({ type: 'decrement' });
};
return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}
export default Counter;这里我们使用 useSelector 钩子函数获取了 count 值，然后使用 useDispatch 获取到 dispatch 函数。在这个示例中，我们也定义了两个函数：increment 和 decrement，借助这两个函数可以分别增加和减少计数器值，从而触发 action，并进而更新组件的状态。
3. Redux Hooks 实战应用
Redux 因其优秀的状态管理能力，应用场景非常广泛。下面，我们将使用 Redux Hooks 实现一个简单的 TODO 应用程序。
（1）创建 store
我们先创建一个 Redux store。这里我们使用 combineReducers 模块来管理多个 reducer 模块的状态：
// javascriptcn.com 代码示例
import { createStore, combineReducers } from 'redux';
const initialState = [];
function todoReducer(state = initialState, action) {
switch (action.type) {
case 'addTodo':
return [...state, { id: Date.now(), text: action.text }];
case 'removeTodo':
return state.filter(todo => todo.id !== action.id);
default:
return state;
}
}
const rootReducer = combineReducers({
todos: todoReducer
});
const store = createStore(rootReducer);我们这里为一个 TODO 应用创建了一个 todoReducer，它可以依据 action 的种类完成增加、删除 TODO 工作。
（2）在组件中使用 useSelector 和 useDispatch
现在我们需要在函数组件中使用 useSelector 和 useDispatch 钩子函数。下面是一个简单的 TodoList 组件示例：
// javascriptcn.com 代码示例
import { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
function TodoList() {
const todos = useSelector(state => state.todos);
const dispatch = useDispatch();
const [text, setText] = useState('');
const handleSubmit = event => {
event.preventDefault();
if (text.trim()) {
dispatch({ type: 'addTodo', text });
setText('');
}
};
const handleRemove = id => {
dispatch({ type: 'removeTodo', id });
};
return (
<div>
<h1>TODOs</h1>
<form onSubmit={handleSubmit}>
<input value={text} onChange={event => setText(event.target.value)} />
<button type="submit">Add</button>
</form>
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}{' '}
<button type="button" onClick={() => handleRemove(todo.id)}>
Remove
</button>
</li>
))}
</ul>
</div>
);
}
export default TodoList;我们使用 useSelector 钩子函数获取 todos 值，使用 useDispatch 获取 dispatch 函数来增加和删除 TODO。我们还使用了 useState 钩子函数管理 text 值，并为添加 TODO 操作绑定了表单的 onSubmit 事件。
上述示例代码完成了一个简单的 TODO 应用的示例，实际生产环境中，逻辑和业务代码相对复杂，但是基本思路和组件以及钩子函数的使用方式和提供的方法是一致的，值得借鉴推广。
4. 总结
Redux Hooks 是一个非常好的库，它可以让我们在 React 中更方便、自然地管理全局状态。当然，如果对于 Redux Hooks 的深度使用和相关概念不是十分理解，建议对 React 和 Redux 库的常规状态管理进行巩固加深才能更好的应用。下面总结一下 Redux Hooks 的基本使用方式：
- 使用 UseSelector 钩子函数获取全局状态
- 使用 useDispatch 函数来调用 Reducer 函数
- 在内部定义事件处理函数处理状态更新
- 基于状态管理库实现的业务逻辑实现
以上步骤具体实现需要根据业务需求和具体场景进行决策，而基本思路和方法应遵循以上步骤的整体流程逻辑。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6541bea17d4982a6ebb59bf6