回到项目 .. 找到 Posts 这个组件 ..
先在它的 constructor 里面,添加一个 this.store .. 这的值就是 context 里面的 store ..
在它的 render 方法里面 .. 可以再添加一个 entities,这个 entities 表示的就是一组东西 .. 它的值是用 this.store.getState() 方法得到的 posts ..
在 render 方法里面,return 的东西,可以是个组件,名字可以是 PostList .. 给它一个 entities 属性 .. 对应的值就是 entities ..
PostList
下面再去创建这个 PostList 组件 .. 这个组件是个普通的函数 .. 在 Redux 里面,这种 React 组件叫展示组件 .. 组件的第一个参数是传递过来的属性 ... 可以直接把 entities 从属性对象里拿出来 ..
函数里面先添加一个 items .. 用一下 entities 的 map 方法,循环的时候当前项目可以叫 item .. 返回的东西是一个 PostItem 组件,等会儿再去创建这个组件 ..
组件上要有个 key 属性,每个 PostItem 组件的 key 的值都应该是唯一的 .. 用一下 item 里的 id 属性 ..
再添加一个 entity,这个属性里面的东西就是内容项目 .. 这里用 item 来表示 ..
下面再 return 一下 .. 一组 div .. 里面是一个 items ..
PostItem
再去创建一个 PostItem 组件,它也是个展示组件 ..
把 entity 从组件的属性里面拿出来 .. 这个 entity 就是在 PostList 组件里面传递过来的属性 ..
return 的东西是一组 div .. 包装一个 h3 标题 .. 里面用一下 entity 里的 title 属性 ..
预览
现在可以去预览一下 ..
在页面上,会显示一个内容项目 ..
这个项目里的内容是我们手工 dispatch 的一个 ADD_POST 动作添加的 ..
在这个 src/index.js 里面,可以再用一下 store 的 dispatch .. 指派一个 ADD_POST 动作 .. 修改一下动作里的 post 的值 .. id 是 2 .. title 可以设置成 react & redux
回到浏览器 ... 现在,页面上又会多了一个内容项目 ..