Redux 的核心思想是通过一个单一的状态树来管理应用的状态，状态的修改通过纯函数（reducers）来进行，从而使状态变化可追踪和可预测。

1、安装 Redux：

在项目中安装 Redux 库和 React-Redux（用于 React 绑定的库）。

npm install redux react-redux

2、创建 Redux store：

在应用的入口文件中创建 Redux store。这个 store 将包含整个应用的状态。

// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';const store = createStore(rootReducer);export default store;

3、创建 Reducers：

创建一个或多个 reducers，每个 reducer 负责处理不同部分的应用状态。Reducers 是纯函数，接收当前状态和一个 action，并返回新的状态。

// reducers.js
const initialState = {counter: 0,
};const rootReducer = (state = initialState, action) => {switch (action.type) {case 'INCREMENT':return { ...state, counter: state.counter + 1 };case 'DECREMENT':return { ...state, counter: state.counter - 1 };default:return state;}
};export default rootReducer;

4、创建 Action Creators：

创建 action creators，它们是返回包含 type 属性的对象的函数。这些对象描述了状态的变化。

// actions.js
export const increment = () => ({type: 'INCREMENT',
});export const decrement = () => ({type: 'DECREMENT',
});

5、连接 React 组件：

使用 react-redux 库中的 Provider 组件将 Redux store 连接到 React 应用，然后使用 connect 函数将组件与 Redux store 关联。

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';function App() {return (<Provider store={store}><div><h1>Redux Counter App</h1><Counter /></div></Provider>);
}export default App;

6、在组件中使用 Redux 状态：

使用 connect 函数将组件连接到 Redux store，并通过 mapStateToProps 和 mapDispatchToProps 将状态和 action creators 映射到组件的 props。

函数组件

// Counter.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';function Counter({ counter, increment, decrement }) {return (<div><p>Counter: {counter}</p><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button></div>);
}const mapStateToProps = (state) => ({counter: state.counter,
});const mapDispatchToProps = {increment,decrement,
};export default connect(mapStateToProps, mapDispatchToProps)(Counter);

类组件 

// MyComponent.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';class MyComponent extends Component {render() {return (<div><p>Counter: {this.props.counter}</p><button onClick={this.props.increment}>Increment</button><button onClick={this.props.decrement}>Decrement</button></div>);}
}// 定义 mapStateToProps 函数，将 Redux 的状态映射到组件的 props
const mapStateToProps = (state) => {return {counter: state.counter,};
};// 定义 mapDispatchToProps 对象，将 action creators 映射到组件的 props
const mapDispatchToProps = {increment,decrement,
};// 使用 connect 函数连接 mapStateToProps 和 mapDispatchToProps 到组件
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);