reducer 拆分
是一个纯函数 里面存着我们项目的全部数据
function reducer(state={ list: { tab: "all", page: 1, data: [] }, article: { detail: {}, message:[] } },action){ switch(action.type){
} return state; }
|
这样我们能有 list列表数据 然后我们还有article文章的数据 可能还有 评论数据 等等各种的数据
这样我们的 reducer 函数就会显得特别的乱后期维护也不是特别好
我们可以按数据块进行拆分吗?
比如 list 是一块 article又是单独的一块 这样就可以单独处理了
那么好我们来实现 一下
list 的数据
function list(list={ tab: "all", page: 1, data: [] },action){ switch(action.type){ case "ADD": let {data} = list; data.push("a"); return { ...list, data } } return list; }
|
article 的数据
function article(article={ detail: {}, message:[] },action){ switch(action.type){ case "ADD": let {message} = article; message.push("b"); return { ...article, message } } return article; }
|
我们需要进行合并然后统一去传递给store
function reducer(state={},action){ return { list:list(state.list,action), article: article(state.article,action) } }
|
这样就可以了 每块都是独立的 可以进行单独的处理了
问题又来了当我们的数据特多的时候我们还是这样进行一个 赋值 会比较麻烦
我们有没有更好的 方法呢?
combineReducers
可以很好的解决这个问题
combineReducers
import { combineReducers } from "redux";
|
我们只需要传递给他一个对象
const reducer = combineReducers({ list, article });
|
里面包含着我们的 list方法和article方法当然你如果还有更多也可以写进去
这样我们看着是不是就很简洁了
坑
我们上面的代码中有一个坑
我们演示一下上面的代码
当我们调用 ADD
的时候
我们初始的数据是

我们调用完

我们发现两个数据的 ADD
都执行了
说明了 他不知道你要执行那个 ADD
而我们就需要进行一个 名字的区分如 LIST_ADD
和 ARTICLE_ADD
这时候我们在调用的时候就知道是想调用那个了