用户登录

这里我们定义的这个 Posts 组件,在 Redux 里面叫 Container 组件 .. 这种组件要从组件的 context 里面得到应用的 store,然后从它里面里得到数据.. 并且还会定义一些行为,再把它们一起传递给组件的子组件 ..

因为这种组件也经常会用到,所以 react-redux 里面提供了另一种创建这种形式的组件的方法 ..

先在文件的顶部 .. 把 connect ,从 react-redux 里面拿出来用一下 ..

然后在文件里添加一个 mapStateToProps .. 它是一个函数 .. 接收一个 state参数,这个 state 就是应用里的数据 .. 它里面 return 的就是组件要传递的属性跟 store 里的 state 的对应关系 ..

比如在我们的这个 Posts 组件里面,需要得到 state 里的 posts , 然后用了一个 entities 属性,把 state 里的 posts 的值传递给了 PostList 这个组件 ...

这样在这个 maptStateToProps 里面,我们要 return 的对象里面,需要有一个 entities .. 对应的 state 就是 state 里的 posts ..

mapDispatchToProps

然后再添加一个 mapDispatchToProps .. 它也是个函数 .. 接收一个 dispatch 参数 ..

在 Posts 这个组件里面,我们定义了一个 onClickDeleteButton 方法 .. 方法做的事就是 dispatch 了一个 DELETE_POST 动作 ...

然后用 onClickDeleteButton 这个属性,把 onClickDeleteButton 方法传递给了 PostList 这个组件 ..

这样在这个 mapDispatchToProps 方法里面 .. 在它 return 的这个对象里面 .. 可以添加一个 onClickDeleteButton .. 它是要传递给组件的属性的名字 ..

它的值是个函数 .. 接收一个 id 参数 .. 里面要做的事情就是 dispatch 一个动作 .. 动作的 type 是 DELETE_POST .. 再添加一个 id ..

connect

下面再定义一个 Posts 组件 .. 这回这个组件可以使用 connect 这个函数给我们生成 .. 把定义的 mapStateToProps .. 还有 mapDispatchToProps 这两个东西交给 connect ..

这个 connect 会返回一个函数 .. 接着我们需要再执行一下它返回的函数 .. 然后再把 PostList 这个组件告诉它 ..

再注释掉下面自己定义的这个 Posts 组件 .. 这个 connect 方法生成的组件,跟我们这里定义的这个 Posts 组件的功能是一样的 ..

现在,在这个文件里面,这个 PropTypes 就用不到了 .. 还有 React 的 Component 也用不到了 .. 可以把它们删除掉 ..

回到浏览器 .. 再试一下 ..

界面上会显示内容列表 .. 按一下内容项目下面的 DELETE .. 可以删除掉当前这条内容项目 ..

用 connect 创建 React 组件《 Redux 与 React 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点