安装Redux库与基础入门
一、安装Redux及配套库
在React项目中引入Redux，首要步骤是安装Redux及其React绑定库react-redux。
使用NPM（Node Package Manager）：
npm install redux react-redux
或者使用Yarn：
yarn add redux react-redux
这将安装Redux库并将其与React项目关联起来。
二、Redux架构概览
Redux是一个独立的状态管理库，可以与React结合使用，但本身并不依赖React。Redux采用单向数据流，其主要概念包括以下几个部分：
Action：是用来描述已发生事件的普通对象，通常包含type字段。
Reducer：是根据当前状态和给定的action计算并返回新状态的纯函数。
Store：是一个对象，它将Actions和Reducers联系在一起，保存状态，并在状态变更时通知UI。
三、基础示例
构建一个简单Redux管理状态的例子。
定义Actions
首先，定义一些actions。在 actions.js中输入：
// 定义增加计数的action类型
export const INCREMENT = 'INCREMENT';
// 返回增加计数的action对象
export const incrementCounter = () => ({
type: INCREMENT
});
创建Reducer
在 reducer.js中，定义处理计数的reducer：
import { INCREMENT } from './actions';
// 初始化状态
const initialState = {
count: 0
};
// reducer函数
function counterReducer(state = initialState, action) {
switch (action.type) {
case INCREMENT:
return {
...state,
count: state.count + 1
};
default:
return state;
}
}
export default counterReducer;
配置Store
创建一个Redux store，将其与reducer绑定。在 store.js中：
import { createStore } from 'redux';
import counterReducer from './reducer';
const store = createStore(counterReducer);
export default store;
React组件使用Redux
在React组件中使用 react-redux提供的 Provider组件来使所有子组件可访问Redux store。同时使用 connect函数将React组件与Redux store相连接。
首先，包裹整个App组件：
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';
function App() {
return (
);
}
export default App;
然后，创建一个计数器组件 Counter.js：
import React from 'react';
import { connect } from 'react-redux';
import { incrementCounter } from './actions';
function Counter({ count, incrementCounter }) {
return (
{count}
);
}
// 将Redux state映射到组件的props
const mapStateToProps = state => ({
count: state.count
});
// 将action创建函数映射到props
const mapDispatchToProps = dispatch => ({
incrementCounter: () => dispatch(incrementCounter())
});
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
四、运行示例
完成以上步骤后，通过运行React应用，应该可以看到一个计数器的界面，并且每点击一次“增加”按钮，计数就会增加。
总结
以上步骤介绍了Redux的基本概念，如何在React应用中安装Redux，以及一个简单的计数器示例，包括定义actions，创建reducers，创建store，并将其与React组件连接。可以通过这个过程来理解Redux是如何提供统一的状态管理，并通过action和reducer来控制应用的状态变化。
