前言
React 是一个非常流行的 JavaScript 前端库，它提供了一种声明式的编程方式，使得我们可以更加高效地构建用户界面。然而，随着应用程序规模的不断增大，状态管理变得越来越困难。Redux 是一个流行的状态管理库，它可以帮助我们更好地管理应用程序的状态，使得应用程序更加可维护和可扩展。
Redux 的基本概念
Redux 的核心概念包括：
- Store：保存应用程序的状态；
- Action：描述状态的变化；
- Reducer：根据 Action 更新状态；
- Middleware：处理异步操作、日志、错误等。
Redux 的数据流如下图所示：
首先，我们通过调用 Action Creator 创建一个 Action。然后，这个 Action 会被发送到 Store 中。Store 会调用 Reducer，Reducer 会根据 Action 更新状态。最后，Store 会通知所有的订阅者，让他们可以获取到最新的状态。
Redux 的应用场景
Redux 适用于以下场景：
- 大型应用程序，需要统一管理状态；
- 多个组件需要共享状态；
- 需要对状态进行时间旅行调试；
- 需要处理异步操作；
- 需要对状态进行持久化。
Redux 的使用方法
下面我们来看一下如何在 React 应用程序中使用 Redux。
安装 Redux
首先，我们需要安装 Redux：
npm install --save redux
创建 Store
我们需要创建一个 Store，用于保存应用程序的状态。我们可以使用 createStore 函数来创建一个 Store：
// javascriptcn.com 代码示例
import { createStore } from 'redux';
const initialState = {
count: 0,
};
function reducer(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(reducer);上面的代码中，我们首先定义了一个初始状态 initialState。然后，我们定义了一个 reducer，这个 reducer 根据不同的 Action 更新状态。最后，我们使用 createStore 函数创建了一个 Store。
创建 Action
我们需要创建一个 Action，用于描述状态的变化。一个 Action 是一个普通的 JavaScript 对象，它包含一个 type 属性和一些其它属性，用于描述状态的变化。我们可以使用 createAction 函数来创建一个 Action：
function increment() {
return { type: 'INCREMENT' };
}
function decrement() {
return { type: 'DECREMENT' };
}上面的代码中，我们分别创建了两个 Action：INCREMENT 和 DECREMENT。
发送 Action
我们可以使用 dispatch 函数来发送一个 Action，将它发送到 Store 中：
store.dispatch(increment()); store.dispatch(decrement());
上面的代码中，我们分别发送了两个 Action：INCREMENT 和 DECREMENT。
获取状态
我们可以使用 getState 函数来获取当前的状态：
const state = store.getState(); console.log(state.count); // 0
上面的代码中，我们获取了当前的状态，并输出了 count 属性的值。
订阅状态变化
我们可以使用 subscribe 函数来订阅状态变化：
store.subscribe(() => {
const state = store.getState();
console.log(state.count);
});
store.dispatch(increment());
store.dispatch(increment());上面的代码中，我们首先订阅了状态变化事件。然后，我们发送了两个 Action，这会导致状态发生变化。最后，我们会收到两次订阅事件，输出最新的状态。
Redux 的中间件
Redux 的中间件可以帮助我们处理异步操作、日志、错误等。下面我们来看一下如何使用 Redux 中间件。
安装中间件
我们需要安装 Redux 中间件：
npm install --save redux-thunk
创建中间件
我们需要创建一个中间件，用于处理异步操作：
// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const initialState = {
count: 0,
};
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
const middleware = [thunk];
const store = createStore(reducer, applyMiddleware(...middleware));
function incrementAsync() {
return dispatch => {
setTimeout(() => {
dispatch(increment());
}, 1000);
};
}
store.dispatch(incrementAsync());上面的代码中，我们首先定义了一个中间件 thunk。然后，我们使用 applyMiddleware 函数将中间件应用到 Store 中。最后，我们创建了一个 Action Creator incrementAsync，这个 Action Creator 返回一个函数，这个函数可以异步地发送一个 Action，通过 setTimeout 函数模拟了一个异步操作。
使用中间件
我们可以使用中间件来处理异步操作：
// javascriptcn.com 代码示例
function incrementAsync() {
return dispatch => {
setTimeout(() => {
dispatch(increment());
}, 1000);
};
}
store.dispatch(incrementAsync());上面的代码中，我们使用 dispatch 函数来发送 Action，这个 Action 是由 incrementAsync 函数生成的。由于 incrementAsync 函数返回了一个函数，因此，这个函数可以异步地发送 Action。
Redux 的示例代码
下面是一个完整的 Redux 示例代码：
// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const initialState = {
count: 0,
};
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
const middleware = [thunk];
const store = createStore(reducer, applyMiddleware(...middleware));
function increment() {
return { type: 'INCREMENT' };
}
function decrement() {
return { type: 'DECREMENT' };
}
function incrementAsync() {
return dispatch => {
setTimeout(() => {
dispatch(increment());
}, 1000);
};
}
store.subscribe(() => {
const state = store.getState();
console.log(state.count);
});
store.dispatch(increment());
store.dispatch(decrement());
store.dispatch(incrementAsync());总结
Redux 是一个流行的状态管理库，它可以帮助我们更好地管理应用程序的状态，使得应用程序更加可维护和可扩展。在 React 应用程序中使用 Redux，我们需要创建一个 Store，用于保存应用程序的状态。然后，我们可以创建 Action，描述状态的变化。最后，我们可以使用 dispatch 函数将 Action 发送到 Store 中，使用 getState 函数获取当前的状态，使用 subscribe 函数订阅状态变化。如果需要处理异步操作、日志、错误等，我们可以使用 Redux 中间件。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65587440d2f5e1655d2a0eee