[Day25] - Using Redux with Web Component

使用组件跟组件的组合 , 形成一个页面

势必会遇到经典的组件传值 issue (下图左侧)

以大家常使用的 Facebook 为例 ,

显示使用者资讯的区块有 4 个

如果转换成 Component 视角来看 ,

势必我们需要将 userData 传来传去 ,

如果 userData 改变 , 你就要通知向上通知 , 又向下通知 , 通过层层关卡的通知链

也许我们只要通知一个人 , 由他通知该通知的人就好

那在 Web Component 中 , 有什麽方式去建立一个 资料集中区 , 通知该通知的人呢 ?

我们来使用 Web Components Redux 来跨过 Web component 的层层传值 issue 吧 !

前期准备

当然是建立要用到的组件

• navigation
• create-story
• navbar
• stories

这里有一个 zip 提供下载

首先 , 我们需要有一个多层的 web components 组 ( 至少要有 4 层 )

然後我们一层一层的传递资料 , ~~ 好麻烦阿 ~~

接着我们将资料接到 Redux 上面 , 轻松写意的传值阿 , 苏福

参考资料

• Web Components Redux