Redux 是一个JavaScript状态管理库，主要用于管理复杂应用的状态。它采用集中式存储的方式，使得整个应用的状态能够在单一的地方进行管理和更新，从而提高代码的可预测性和可调试性。React与Redux结合使用时，Redux负责全局状态的管理，而React组件则专注于视图层的渲染。
Redux的核心概念：
- Store：是 Redux 中用来存放整个应用状态的地方，它有以下职责：
- 维护应用的状态（state）。
- 提供
getState()方法获取当前状态。 - 提供
dispatch(action)方法来触发状态更改。 - 可以注册监听器，当状态变化时调用。
- Action：是一个描述发生了什么的纯对象，它是改变store中状态的唯一途径。每个action都有一个type属性，用于标识动作类型。
// Action 示例
const increment = () => ({
type: 'INCREMENT',
});
const decrement = () => ({
type: 'DECREMENT',
});- Reducer：纯函数，接收旧的state和一个action作为参数，并返回新的state。所有的状态更新都是通过reducer执行纯计算完成的。
// Reducer 示例
function counterReducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}- react-redux：官方提供的React绑定库，提供了
Provider和connect两个主要API。
-
Provider组件包裹在React应用最外层，将store注入到子组件树中。 -
connect函数用于将Redux store中的状态映射到React组件的props上，并提供dispatch方法给组件，以便组件可以发起action。
基础使用示例：
首先安装必要的包：
npm install redux react-redux创建Redux store：
import { createStore } from 'redux';
// 使用上面定义的reducer
const store = createStore(counterReducer);配置React应用：
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store'; // 导入创建好的store
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);在React组件中连接Redux store：
import React from 'react';
import { connect } from 'react-redux';
// 假设有一个展示计数器值的简单组件
class Counter extends React.Component {
render() {
const { count, dispatch } = this.props;
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => dispatch(increment())}>+</button>
<button onClick={() => dispatch(decrement())}>-</button>
</div>
);
}
}
// 映射Redux store中的state到props
const mapStateToProps = state => ({ count: state }); // 简单情况下state即为count值
// 将action creator注入到props.dispatch中
const mapDispatchToProps = { increment, decrement };
// 连接Redux store与React组件
export default connect(mapStateToProps, mapDispatchToProps)(Counter);以上只是一个非常基础的Redux与React结合使用的例子，实际项目中通常会配合中间件、持久化存储等更复杂的功能。同时，在现代Redux应用中，建议使用createSlice和createAsyncThunk等工具函数（来自@reduxjs/toolkit），它们能帮助开发者更加高效地管理和生成reducers与actions。
