如何引用react redux
安装 React Redux
确保项目中已安装 React 和 Redux。通过 npm 或 yarn 安装 React Redux：
npm install react-redux
# 或
yarn add react-redux配置 Provider
在应用的根组件中，使用 Provider 包裹整个应用，并将 Redux store 作为参数传递：
import { Provider } from 'react-redux';
import store from './store'; // 假设 store 已配置
function App() {
return (
<Provider store={store}>
<YourAppComponent />
</Provider>
);
}使用 useSelector 和 useDispatch
在函数组件中，通过 useSelector 获取状态，通过 useDispatch 触发 action：
import { useSelector, useDispatch } from 'react-redux';
function Counter() {
const count = useSelector(state => state.counter);
const dispatch = useDispatch();
return (
<div>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
<span>{count}</span>
</div>
);
}使用 connect（类组件）
对于类组件，使用 connect 高阶函数绑定状态和 action：
import { connect } from 'react-redux';
class Counter extends React.Component {
render() {
return (
<div>
<button onClick={this.props.increment}>+</button>
<span>{this.props.count}</span>
</div>
);
}
}
const mapStateToProps = state => ({
count: state.counter
});
const mapDispatchToProps = dispatch => ({
increment: () => dispatch({ type: 'INCREMENT' })
});
export default connect(mapStateToProps, mapDispatchToProps)(Counter);创建 Redux Store
确保已正确配置 Redux store，通常通过 createStore 或 configureStore（Redux Toolkit）：
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;
