` 中的组件，都可以获取到store中的数据。
### 2、connect连接器
我们已经可以获取到数据，但需要在组件中设置连接器。
接下来，我们需要到 `App.js` 中进行修改：
```jsx
import React, { Component } from 'react'
// import store from './store'
import {connect} from 'react-redux' //引入连接器
class App extends Component {
// state = store.getState()
render() {
return (
{this.props.count}
)
}
}
// stateToProps是一种映射关系，把原来的state映射成组件中的props属性
const stateToProps = (state)=>{
return {
count : state.count
}
}
// 这里不再是导出App，而是导出连接器
export default connect(stateToProps,null)(App);
```
以上主要删除了store的引入，增加了连接器与映射关系。
### 3、事件派发
接下来我们需要点击按钮增加count，其实就是修改store中的count。
`App.js` 中：
```jsx
import React, { Component } from 'react'
// import store from './store'
import {connect} from 'react-redux' //引入连接器
class App extends Component {
// state = store.getState()
render() {
return (
{this.props.count}
)
}
}
// stateToProps是一种映射关系，把原来的state映射成组件中的props属性
const stateToProps = (state)=>{
return {
count : state.count
}
}
// dispatchToProps也是一种映射，用于传递并修改数据，这里要返回一个对象并包含一个事件
const dispatchToProps = (dispatch) => {
return {
addCount(){
const action = {
type: "add_count",
value: 1
}
dispatch(action)
}
}
}
// 这里不再是导出App，而是导出连接器
export default connect(stateToProps, dispatchToProps)(App);
```
`reducer.js` 中：
```js
const defaultState = {
count: 22
}
export default (state = defaultState, action) => {
if(action.type === "add_count"){
const newState = JSON.parse(JSON.stringify(state));
newState.count += action.value;
return newState;
}
return state;
}
```
如此，我们就成功实现了对count的累加。
## 十四、ReactRedux流程图【了解】
[](https://tva1.sinaimg.cn/large/008eGmZEgy1gpp69hggimj30ya0i1tdp.jpg)
## 十五、课堂练习【重要】
使用React-redux完成TodoList。
代码：
src/index.js：
```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import Add from './Add'
import TodoList from './TodoList'
import store from './store'
import { Provider } from 'react-redux'
import 'antd/dist/antd.css';
const app =
ReactDOM.render(
app
, document.getElementById('root')
)
```
src/TodoList.js：
```jsx
import React, { Component } from 'react'
import { Input, Button, List } from 'antd';
import { connect } from 'react-redux'
class TodoList extends Component {
render() {
return (
(
{item}
// 或者是：
this.props.dblClick(index)}> {item}
)}
/>
)
}
}
const mapStateToProps = (state) => {
return {
data: state.data,
iptVal: state.iptVal
}
}
const mapDispatchToProps = (dispatch) => {
return {
handleChange(e){
const action = {
type: "change_ipt_val",
value: e.target.value
}
dispatch(action)
},
handleClick(){
const action = {
type: "get_ipt_val"
}
dispatch(action)
},
dblClick(index){
const action = {
type: "del_arr_item",
value: index
}
dispatch(action)
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoList)
```
store/index.js：
```js
import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store;
```
store/reducer.js：
```js
const defaultState = {
num: 0,
data: [
'第一条信息',
'第二条信息'
],
iptVal: ""
}
export default (state = defaultState, action) => {
var newState = JSON.parse(JSON.stringify(state))
switch (action.type) {
case "add_num":
newState.num += action.value;
break;
case "change_ipt_val":
newState.iptVal = action.value;
break;
case "get_ipt_val":
newState.data.push(newState.iptVal);
newState.iptVal = "";
break;
case "del_arr_item":
newState.data.splice(action.value, 1);
break;
default:
break;
}
return newState;
}
```
## 十六、作业
使用 React-Redux 完成 TodoList。