从 0 到 1 学习使用 Redux
前言
随着前端应用的日益复杂，管理应用状态变得越来越困难。Redux 是一种轻量级的状态管理库，它专注于提供可预测的状态容器，在数据流的管理上可以说是一种很好的解决方案。
本文将为你介绍从 0 到 1 学习使用 Redux 的全过程，让你了解 Redux 的基础知识和核心原理，同时还会提供一些实用的代码示例。希望这篇文章能够对你的学习和工作有所帮助。
Redux 的基础概念
Redux 的基础概念包括：store、action 和 reducer。
store：一个对象，它保存了应用中所有的 state。
action：描述了发生了什么，是修改 state 的唯一途径。
reducer：一个纯函数，接收当前的 state 和一个 action，返回新的 state。
一个 Redux 应用的数据流程如下图所示：
示例代码：
// 创建 store const store = Redux.createStore(reducer);
// 定义 action const ADD_TODO = 'ADD_TODO'; const REMOVE_TODO = 'REMOVE_TODO';
function addTodo(todo) { return { type: ADD_TODO, todo, } }
function removeTodo(id) { return { type: REMOVE_TODO, id, } }
// 定义 reducer function todos(state = [], action) { switch (action.type) { case ADD_TODO: return [...state, action.todo]; case REMOVE_TODO: return state.filter(todo => todo.id !== action.id); default: return state; } }
Redux 流程的工作方式非常简单，使用这个流程可以解决很多问题，但是使用不当会增加复杂性。希望以上内容可以让你初步理解 Redux 的基本概念和原理。
Redux 的工作方式
Redux 的工作方式可以分为三个阶段：Dispatch（分发）、Middleware（中间件）和 Reducer（归并）。
Dispatch：分发一个 action，这个过程是通过 store.dispatch() 方法来完成的。我们可以在组件中调用 store.dispatch() 方法来分发 action，这样就可以触发 Redux 中数据流的运转了。
Middleware：运用中间件可以解决 Redux 中的一些复杂问题。中间件是 Redux 中的一个重要概念，它可以在 action 到达 reducer 之前执行一些操作，比如异步请求、日志记录等。
Reducer：根据 action 和当前的 state 计算出新的 state。reducer 可以接收多个 state，但是最终只能返回一个 state。在 reducer 中，一定要保持纯函数，即只依赖于传入的参数并且只会返回一个新的 state。
Redux 的工作方式可以用以下代码示例来说明：
// 在组件中分发 action store.dispatch(addTodo({ id: 1, text: 'Learn Redux', }));
// 中间件示例 const logger = store => dispatch => action => { console.log('dispatching', action); const result = dispatch(action); console.log('next state', store.getState()); return result; };
// 定义 reducer function todos(state = [], action) { switch (action.type) { case ADD_TODO: return [...state, action.todo]; case REMOVE_TODO: return state.filter(todo => todo.id !== action.id); default: return state; } }
Redux 的高级用法
除了基本概念和工作方式，Redux 还提供了一些高级用法，比如：异步 action、合并多个 reducer。
异步 action
Redux 的异步 action 中间件可以很好地解决异步操作的问题，这个中间件包括如下几个步骤：
发起异步操作时，我们需要分发一个 action，表示异步操作已经开始了，我们要在 reducer 中处理这个 action，并且设置当前的 state 为正在加载的状态。
异步操作完成后，需要再次分发一个 action，这个 action 包含异步操作的结果，我们可以在 reducer 中处理这个 action，更新 state 状态。
Redux 官方提供了两个非常好用的异步 action 中间件：redux-thunk 和 redux-saga。这里我选用 redux-thunk 中间件做一个简单的示例：
// 分发一个异步 action store.dispatch((dispatch) => { dispatch({ type: 'FETCH_START' }); fetch('https://api.example.com/') .then(response => response.json()) .then(data => { dispatch({ type: 'FETCH_SUCCESS', data }); }) .catch(error => { dispatch({ type: 'FETCH_ERROR', error }); }); });
// 在 reducer 中处理异步 action function todos(state = { isLoading: false, data: [] }, action) { switch (action.type) { case 'FETCH_START': return { ...state, isLoading: true }; case 'FETCH_SUCCESS': return { ...state, isLoading: false, data: action.data }; case 'FETCH_ERROR': return { ...state, isLoading: false, error: action.error }; default: return state; } }
合并多个 reducer
Redux 允许我们把 reducer 分割成多个小的 reducer，每个 small reducer 只关注全局 state 中某一部分的数据。这样做的好处是可以减少每个 reducer 大小，使得代码更加可读和维护。
Redux 提供了一个 combineReducers() 方法来合并多个 reducer，使用方法如下：
import { combineReducers } from 'redux'; import todos from './todos'; import visibilityFilter from './visibilityFilter';
export default combineReducers({ todos, visibilityFilter, });
我们需要先把不同部分的 reducer 分离出来，然后通过 combineReducers() 方法合并起来，得到一个合并后的 reducer。
总结
Redux 的使用需要明确三个基本概念：store、action 和 reducer。Redux 的工作方式可分为三个阶段：Dispatch（分发）、Middleware（中间件）和 Reducer（归并）。
Redux 提供了一些高级用法，比如异步 action、合并多个 reducer。这些用法可以使应用更加灵活和可维护。
希望通过这篇文章，你对 Redux 有了更深层次的了解和应用。同时，也希望这篇文章对你理解 Redux 及其在前端开发中的应用有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ccb52b5ad90b6d042ae5b6