组合 Reducer

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

复杂的应用,可以创建多个 Reducer, 让它们各自负责自己的那部分事情,也就是每个 Reducer 都有自己负责要处理的 state ,还有 action .. 然后我们再把它们结合到一块儿 ..

假设我们的应用是个内容管理系统 .. 应用的 state 可能会像这样 .. 用一个对象表示应用的 state .. 里面可以有个 posts ,这个 posts 的数据就是一组内容 .. 每个内容又是一个单独的对象 .. 内容项目可能会有一个 id 号 .. 还有一个 title 属性 ..

应用的 state 里面,可能还会有一组 comments .. 就是评论内容 .. 每个评论项目又是一个对象 .. 每个项目都有自己的 id 号 .. postId 是评论内容所属的内容的 id 号 .. 还有一个 content .. 它是具体的评论内容 ..

Reducer

现在我们可以去创建两个 Reducer,分别让它们处理 state 里的 posts ,还有 comments .. 先添加一个 postsReducer ,用这个 reducer 可以处理 state 里的 posts .. 它的 state 的值应该是个数组 .. 还有一个 action ..

再添加一个可以处理 comments 的 reducer .. 名字是 commentsReducer .. 它的 state 默认也是一个数组 .. reducer 还有一个 action 参数 ..

下面再去创建一个 reducer ,名字是 mainReducer .. 这个 reducer 的 state 默认的值应该是个对象 .. 一个 action 参数 ..

在这个 reducer 里面,我们可以把 postsReducer 跟 commentsReducer 合并到一块儿 .. reducer 其实就是返回处理之后的 state .. 我们的应用的 state 是个对象 .. 在这个 mainReducer 里面,让它返回一个对象 ..

对象里面有个 posts .. 这部分数据可以交给 postsReducer .. 把 state 里的 posts 交给这个 postsReducer ...

这样在 posts 这个 reducer 里面,它的 state 表示的就是应用的 state 里的 posts 这块数据 ..

还有一个 action ..

应用的 state 里面,还有一个 comments 数据 ... 这块数据可以使用 commentsReducer 来处理 .. 把 state 里的 comments 这块内容交给 commentsReducer .. 再把 action 交给它 ..

这样这个 mainReducer 返回的就是应用的 state,在它里面,我们把应用的 state 分成了两块,posts 还有 comments .. 然后用 postsReducer 处理 posts 数据 .. 用 commentsReducer 处理 state 里的 comments 数据 ..

这里用了 createStore 创建一个 store .. 创建 store 的时候要告诉它应用的 Reducer ,现在应该就是 mainReducer ..

下面又用了一个 store 里的 subscribe 方法,把 log 函数交给了这个方法,这样每次应用里的 state 有变化,都会执行一下 log 这个函数 ..

组合 Reducer《 Redux:数据管理 》

统计

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

社会化网络

关于

微信订阅号

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