前端技术一直在不断地发展变化，Redux 就是在这些变化中涌现出来的一种流行的状态管理库。Redux 解决了在大型项目中状态管理的问题，成为了 React 生态圈中不可或缺的一部分。本文将详细介绍 Redux 的概念、工作原理和在项目中的具体应用，带你深入了解 Redux，让你能够在项目中更好地使用 Redux。
什么是 Redux？
Redux 是一个状态管理库，主要负责应用程序的状态管理。Redux 的状态是以一个单一对象的形式保存起来的，这个对象就是应用程序的状态树(state tree)。 Redux 很好地利用了JavaScript 中对象引用的特性，能够很容易地通过比较引用的方式检测到状态树发生了修改，从而进行更新视图。Redux 遵循 unidirectional data flow(单向数据流) 的模式，将状态变化一路自上而下传递到视图层，使得数据流动变得清晰明了。
Redux 的关键概念有:
- Store: 应用程序的唯一状态树，保存了应用程序中所有组件的状态。
- Reducer: 一个纯函数，接收旧的状态和一个 action，返回新的状态。Reducer 不进行实际的状态修改操作，而是返回一个新的状态对象。Reducer 本质上是状态修改的描述。
- Action: 这是更新状态的唯一方式。Action 是一个包含 payload 和 type 的对象，主要用于描述当前发生的情况，将需要更新的数据传递给 Reducer。
- Dispatch:用于在 Store 上发布 action，触发状态树更新，这个操作是被手动调用的。
Redux 工作原理
Redux 的工作过程可以描述为一个流程图：
整个应用程序的状态都存在于 Store 中，当我们需要修改状态时，需要先调用一个 action creator 创建一个 action 对象。 然后将这个 action 对象发布到 Store，意味着一个新的状态即将去更新。Reducer 会拿到之前的状态和这个 action 对象，返回一个新的状态。Store 将这个新状态存储下来，并通知所有的监听函数这个状态已经发生了改变，然后等待下一次状态变化。
如何使用 Redux?
接下来我们将演示如何使用 Redux 实现一个 todo 应用程序。这个应用程序包含的操作有：
- 添加 todo
- 删除 todo
- 标记 todo 已完成/未完成
- 显示全部 todos/已完成 todos/未完成 todos
安装和引用
首先，你需要在你的项目中安装 Redux：
npm install redux react-redux
然后，你可以像其他组件一样引用这些包:
import { createStore } from 'redux';
import { Provider } from 'react-redux';创建 Reducer 和 Store
下面我们创建 reducer，reducer 的作用是在接收到 action 后返回新的状态。根据我们的需求，我们需要处理下面几个 action 类型:
- ADD_TODO
- DELETE_TODO
- TOGGLE_TODO
- SET_VISIBILITY_FILTER
// www.javascriptcn.com code example
import { combineReducers } from 'redux';
// 定义 action 类型常量
const ADD_TODO = 'ADD_TODO';
const DELETE_TODO = 'DELETE_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';
const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
// 添加一个 todo
export function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
// 删除一个 todo
export function deleteTodo(index) {
return {
type: DELETE_TODO,
index
}
}
// 标记一个 todo 的状态
export function toggleTodo(index) {
return {
type: TOGGLE_TODO,
index
}
}
// 设置过滤器
export function setVisibilityFilter(filter) {
return {
type: SET_VISIBILITY_FILTER,
filter
}
}
// Reducer
function todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [...state, {
text: action.text,
completed: false
}];
case DELETE_TODO:
return [
...state.slice(0, action.index),
...state.slice(action.index + 1)
];
case TOGGLE_TODO:
return [
...state.slice(0, action.index),
Object.assign({}, state[action.index], {
completed: !state[action.index].completed
}),
...state.slice(action.index + 1)
];
default:
return state;
}
}
// 过滤器 Reducer
function visibilityFilter(state = 'SHOW_ALL', action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return action.filter;
default:
return state;
}
}
// 组合 Reducer
const todoApp = combineReducers({
visibilityFilter,
todos,
});
// 创建 Store
const store = createStore(todoApp);
export default store;我们先定义了四个 action 创建函数( addTodo、deleteTodo、toggleTodo、setVisibilityFilter)，然后用 switch 语句根据不同的 action 类型返回新的状态。combineReducers 函数将这两个 reducer 函数合并成一个顶级 reducer，最后我们用 createStore 函数创建了全局唯一的 Store 对象。
渲染视图
接下来，我们将为应用程序渲染一个简单的界面：
// www.javascriptcn.com code example
import React from 'react';
import { connect } from 'react-redux';
import { addTodo, deleteTodo, toggleTodo, setVisibilityFilter } from './store';
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
this.onClick = this.onClick.bind(this);
this.handleChange = this.handleChange.bind(this);
}
onSubmit(e) {
// 阻止 submit 事件自动跳转页面
e.preventDefault();
const input = this.input;
if (!input.value.trim()) {
return;
}
this.props.onAdd(input.value);
input.value = '';
}
onClick(index) {
this.props.onDelete(index);
}
handleChange(e) {
const filter = e.target.value;
this.props.onFilter(filter);
}
render() {
return (
<div>
<form onSubmit={this.onSubmit}>
<input ref={node => this.input = node} />
<button type="submit">Add Todo</button>
</form>
<br />
{this.props.todos.map((todo, index) =>
<li key={index} onClick={() => this.props.onToggle(index)} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
{todo.text}
<button onClick={() => this.onClick(index)}>X</button>
</li>
)}
<br />
<div>
<span>Show:</span>
<button onClick={() => this.props.onFilter('SHOW_ALL')}>All</button>
<button onClick={() => this.props.onFilter('SHOW_COMPLETED')}>Completed</button>
<button onClick={() => this.props.onFilter('SHOW_ACTIVE')}>Active</button>
</div>
</div>
);
}
}
// 过滤函数
function getVisibleTodos(todos, filter) {
switch (filter) {
case 'SHOW_ALL':
return todos;
case 'SHOW_COMPLETED':
return todos.filter(todo => todo.completed);
case 'SHOW_ACTIVE':
return todos.filter(todo => !todo.completed);
default:
return todos;
}
}
// mapStateToProps 函数，用于将 Store 中的状态映射到 props 上
function mapStateToProps(state) {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
};
}
// mapDispatchToProps 函数，用于将 action 创建函数映射到 props 上
function mapDispatchToProps(dispatch) {
return {
onAdd: text => dispatch(addTodo(text)),
onDelete: index => dispatch(deleteTodo(index)),
onToggle: index => dispatch(toggleTodo(index)),
onFilter: filter => dispatch(setVisibilityFilter(filter))
};
}
// 使用 connect 函数将 mapStateToProps 和 mapDispatchToProps 与组件 TodoApp 关联起来
const TodoAppContainer = connect(mapStateToProps, mapDispatchToProps)(TodoApp);
// 渲染组件
export default function App() {
return (
<Provider store={store}>
<TodoAppContainer />
</Provider>
);
}我们渲染了一个包含三个按钮的 div 区域，分别是全部 todo、已完成的 todo 和未完成的 todo。根据不同的按钮类型筛选出不同的 todo 项，并绑定了对应的事件处理函数。
我们用 connect 函数将 TodoApp 组件与 Redux 的 Store 相关联。通过 mapStateToProps 函数，我们将 Store 中的 todos 和 visibilityFilter 对象映射为组件中的 props。随后，通过 mapDispatchToProps 函数，我们将 action 创建函数映射为组件中的 props。这样我们就可以在组件中通过 this.props.onAdd、this.props.onDelete 和 this.props.onFilter 获取到对应的 action 创建函数并触发更新状态的操作。
总结一下，这就是 Redux 的基本用法。 Redux 的设计思想可以简化应用程序的复杂度，使得开发者可以更加清晰地了解哪里发生了状态的改变，哪些组件会受到影响。Redux 的使用让我们的项目变得更加容易维护和扩展。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64980de548841e98945200b3