ReactJS - Redux：初学者指南

你好，有抱负的开发者！我很高兴能成为你进入ReactJS和Redux世界的向导。作为一个教计算机科学多年的老师，我见证了无数学生在掌握这些概念时眼睛发亮。那么，让我们跳进去，创造一些魔法吧！

ReactJS - Redux

Redux是什么？

在我们跳入代码之前，让我们先了解一下Redux。想象你正在组织一个大型派对（这就是你的应用），你需要跟踪所有的客人、食物和音乐（这就是你的应用的状态）。Redux就像你超级高效的派对策划者，把所有东西都组织在一个中心位置。

Redux是一个状态管理库，它能帮助你更有效地管理React应用中的数据。它特别适用于大型应用，其中组件之间传递数据可能会变得复杂。

Redux的核心概念

让我们分解Redux的主要概念：

1. 存储（Store）

存储就像一个大的容器，保存了你应用的所有状态。它是你应用数据的唯一真相来源。

2. 动作（Actions）

动作就像告诉存储你的应用发生了什么的消息。它们是简单的JavaScript对象，必须有一个type属性。

3. 红ucer（Reducers）

Reducer是函数，指定应用的状态如何响应动作。它们接受当前状态和动作作为参数，并返回一个新的状态。

4. 派发（Dispatch）

派发是一个方法，它发送动作到存储以更新状态。

现在，让我们通过一些代码示例来看看这些概念的实际应用！

设置Redux

首先，我们需要安装Redux和React-Redux：

npm install redux react-redux

现在，让我们创建一个简单的计数器应用来演示Redux是如何工作的。

创建存储

import { createStore } from 'redux';

// 这是我们的reducer
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
};

// 创建存储
const store = createStore(counterReducer);

在这个例子中，我们创建了一个带有简单计数器reducer的存储。Reducer监听'INCREMENT'和'DECREMENT'动作，并相应地更新状态。

定义动作

// 动作创建者
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

这些都是我们的动作创建者。它们返回动作对象，我们的reducer将响应这些对象。

使用Provider组件

Provider组件使Redux存储对任何需要访问Redux存储的嵌套组件可用。

import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import counterReducer from './reducers';
import App from './App';

const store = createStore(counterReducer);

const Root = () => (
<Provider store={store}>
<App />
</App>
);

export default Root;

这段代码用Provider包裹了我们的主App组件，使所有组件都能访问存储。

将组件连接到Redux

现在，让我们创建一个使用我们Redux存储的Counter组件：

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = ({ count, increment, decrement }) => (
<div>
<h2>计数：{count}</h2>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);

const mapStateToProps = (state) => ({
count: state,
});

const mapDispatchToProps = {
increment,
decrement,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

让我们分解一下：

我们从react-redux导入connect，它允许我们将组件连接到Redux存储。
mapStateToProps告诉Redux如何将状态映射到我们组件的props。
mapDispatchToProps让我们将动作创建者映射到props。
connect包裹了我们的组件，将状态和动作创建者作为props注入。

Redux API方法

下面是一些重要的Redux API方法的表格：

方法	描述
createStore(reducer, [preloadedState], [enhancer])	创建一个Redux存储
combineReducers(reducers)	将多个reducers组合成一个reducing函数
applyMiddleware(...middlewares)	将中间件应用到Redux存储的dispatch方法
bindActionCreators(actionCreators, dispatch)	将一个对象（其值为动作创建者）转换为一个对象，其中的每个键对应一个包装了dispatch调用的动作创建者

结论

就是这样！我们已经覆盖了Redux的基础，从理解其核心概念到在React应用中实现它。记住，Redux一开始可能看起来有点复杂，但就像学骑自行车一样——一旦你掌握了它，你会想知道没有它你是怎么做到的！

在你继续你的旅程时，你将发现Redux的更多高级特性，比如中间件和异步动作。但现在，给自己一个掌声——你已经迈入了状态管理的一个更广阔的世界！

继续编码，继续学习，最重要的是，继续享受乐趣！下次见，快乐的Redux使用！

Credits: Image by storyset