react-redux的使用(一)

react-redux是一个第三方的模块,它可以帮助我们在react中更方便的使用redux。
把之前的文件全都删掉,重新编写。
在这里插入图片描述
先安装react-redux:npm install react-redux
接着新建TodoList组件:
在这里插入图片描述
Provider是react-redux提供的一个核心api,它的意思是:我的提供器连接了store,Provider组件和store做了关联,那么Provider组件里的所有的子组件都有能力获取到store里的数据。
在这里插入图片描述
接着看TodoList组件怎么获取的,之前TodoList组件是通过this.state = store.getState();来获取store里的数据的。但是当我们用了react-redux之后想获取数据就不用这么麻烦了。
connect是react-redux提供的另外一个核心api,它让组件和store进行连接。因为组件是在Provider组件里的,所以是可以连接上的。
在这里插入图片描述
它的连接是有规则的:
我让我的TodoList和store进行连接,mapStateToProps意思是把store里的数据映射到TodoList组件的props,参数state就是store里的数据。mapDispatchToProps意思是如果我想修改store里数据,这里是我把store.dispatch方法挂载到props上,
在这里插入图片描述
在这里插入图片描述
connect前两个参数是连接的规则,后面是需要连接的组件。

猜你喜欢

转载自blog.csdn.net/u013565133/article/details/88824361