使用 React 和 Redux 构建一个计数器应用
React 是一个用于构建用户界面的 JavaScript 库，它因其声明式的编程模型和高效的虚拟DOM更新机制而广受欢迎。当涉及到复杂的状态管理和多个组件之间的状态同步时，Redux 成为了一个很好的解决方案。下面，我们将通过一个简单的计数器应用来演示如何使用 React 结合 Redux。
1. 准备环境
首先，确保你的开发环境中已经安装了 Node.js。接着，我们需要安装 Create React App，这是一个官方提供的脚手架工具，可以帮助我们快速搭建 React 应用。
打开终端或命令提示符，执行以下命令来全局安装 Create React App：
npm install -g create-react-app
2. 创建项目
使用 Create React App 创建一个新的 React 项目：
create-react-app counter-app
cd counter-app
3. 安装 Redux 和 React-Redux
接下来，我们需要安装 Redux 以及它的 React 绑定库 react-redux：
npm install redux react-redux
4. 设置 Redux Store
首先，创建一个名为 store.js 的文件，用于配置 Redux store：
// src/store.js
import {
createStore } from 'redux';
import counterReducer from './reducers';
const store = createStore(counterReducer);
export default store;
5. 创建 Reducer
创建一个名为 reducers.js 的文件，用于定义应用的状态变更逻辑：
// src/reducers.js
const initialState = {
count: 0,
};
function counterReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return {
...state, count: state.count + 1 };
case 'DECREMENT':
return {
...state, count: state.count - 1 };
default:
return state;
}
}
export default counterReducer;
6. 创建 Actions
创建一个名为 actions.js 的文件，用于定义应用的动作创建函数：
// src/actions.js
export const increment = () => ({
type: 'INCREMENT' });
export const decrement = () => ({
type: 'DECREMENT' });
7. 设置 Provider
为了让整个应用都能访问到 Redux store，我们需要在 App.js 中包裹 <Provider> 组件：
// src/App.js
import React from 'react';
import {
Provider } from 'react-redux';
import store from './store';
import Counter from './components/Counter';
function App() {
return (
<Provider store={
store}>
<div className="App">
<Counter />
</div>
</Provider>
);
}
export default App;
8. 创建计数器组件
创建一个名为 Counter.js 的文件，用于显示计数器并提供操作按钮：
// src/components/Counter.js
import React from 'react';
import {
connect } from 'react-redux';
import {
increment, decrement } from '../actions';
const mapStateToProps = (state) => ({
count: state.count,
});
const mapDispatchToProps = (dispatch) => ({
onIncrement: () => dispatch(increment()),
onDecrement: () => dispatch(decrement()),
});
const Counter = ({
count, onIncrement, onDecrement }) => (
<div>
<p>当前计数：{
count}</p>
<button onClick={
onIncrement}>增加</button>
<button onClick={
onDecrement}>减少</button>
</div>
);
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
9. 运行应用
最后，我们可以启动开发服务器来预览我们的应用：
npm start
访问 http://localhost:3000，你应该能看到一个简单的计数器应用，可以点击“增加”和“减少”按钮来修改计数值。
通过这个例子，我们学习了如何使用 React 和 Redux 构建一个简单的计数器应用。在这个过程中，我们了解了如何组织应用的状态、如何定义 reducer 来处理状态更改逻辑、以及如何使用 actions 来触发状态变更。此外，我们还学习了如何使用 connect 来连接组件与 store，以及如何使用 Provider 来使 store 可供整个应用访问。
这种模式非常适合于大型应用，特别是当多个组件需要共享状态或者当状态逻辑变得复杂时。通过将状态管理分离出来，我们可以获得更清晰、更易于维护的代码结构。
