React-Redux 是为了更方便地在 React 应用中
使用 Redux 而创建的一个库。它提供了一些 API，可以让
Redux 的 store 和 React
组件之间更容易地进行连接。下面是
React-Redux 的
使用方法：
1. 安装
React-Redux
首先，需要安装
React-Redux 库。在命令行中输入以下命令：
```
npm install
react-redux
```
2. 创建 Store
在应用中创建
Redux 的 store，可以
使用 Redux 的 createStore
函数来创建，如下所示：
```
import { createStore } from '
redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
```
3.
Provider 组件
使用 React-Redux 提供的
Provider 组件将 store 传递给应用的所有
组件。在应用的入口文件中，将 App
组件包裹在
Provider 组件中，如下所示：
```
import React from 'react';
import ReactDOM from 'react-dom';
import {
Provider } from '
react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<
Provider store={store}>
<App />
</
Provider>,
document.getElementById('root')
);
```
4.
connect 函数
使用 React-Redux 提供的
connect 函数将
组件连接到 store 上，使其能够读取和修改 store 中的状态。
connect 函数接受两个参数：mapStateToProps 和 mapDispatchToProps。mapStateToProps 是一个
函数，它将 store 中的状态映射到
组件的 props 中。mapDispatchToProps 是一个
函数，它将 store 的 dispatch 方法映射到
组件的 props 中，使
组件能够触发 action。下面是一个
使用 connect 函数的示例：
```
import React from 'react';
import {
connect } from '
react-redux';
class MyComponent extends React.Component {
render() {
return (
<div>
<h1>{this.props.count}</h1>
<button onClick={this.props.increment}>Increment</button>
</div>
);
}
}
const mapStateToProps = state => {
return {
count: state.count
};
};
const mapDispatchToProps = dispatch => {
return {
increment: () => dispatch({ type: 'INCREMENT' })
};
};
export default
connect(mapStateToProps, mapDispatchToProps)(MyComponent);
```
在上面的代码中，
connect 函数将 MyComponent
组件连接到 store 上，并将 count 属性和 increment 方法映射到
组件的 props 中。这样，MyComponent
组件就能够读取和修改 store 中的状态了。
以上就是
使用 React-Redux 的基本方法。通过
Provider 和
connect 这两个 API，我们可以更方便地在 React 应用中
使用 Redux。
1575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
