博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Redux 中 combineReducers实现原理
阅读量:6709 次
发布时间:2019-06-25

本文共 2117 字,大约阅读时间需要 7 分钟。

使用一个reducer

const initialState =    {        id          : 2,        name    : 'myName',     }    import { createStore } from 'redux';    const reducer = function(state=initialState, action) {                    //...                return state;    }    const store = createStore(reducer);

这种情况下,这个reducer函数会对所有的action进行判断和处理,传入的state参数是整个store中的状态的全集。可能是这样:

{                id          : 2,                name    : 'myName',     }

使用combineReducers 复合多个reducer

const user = (state = [], action) => {        switch (action.type) {            case 'RENAME':                //...            default:                return state;        }    }const product = (state = [], action) => {        switch (action.type) {            case 'SOLD':                //...            default:                return state;        }    }const reducers = combineReducers({    user,    product,});const store = createStore(reducers);

这种情况下,每个reducer会对相关的action进行处理,返回与之相关的状态。(而实际实现是,combineReducers将所有reducer合并成立一个大的reducer)。

整个store的状态全集会是如下样子:

{        user: {            id: 0,            name: 'myNmae',        },        product: {                id: 0,                is_sold: 0,        }}

可以看出这是一个树形结构,每个reducer所处理的数据在自己的分支结构中。因此,每个reducer可以独立的编写,无需关注其他reducer的数据(state)处理方式。同样,dispatch的时候只要发送与之相关的内容即可。

譬如,写一个“我”的reducer:

const initialState =        {            name                 : null,            displayName     : null,        };        const me = (state = initialState, action) =>        {            switch (action.type)            {                case 'SET_ME':                {                    const { name, displayName } = action.payload;                    return { name, displayName };                }                default:                    return state;            }        };//想要设置“我”的属性,只要:store.dispatch({    type    : 'SET_ME',    payload : { "jacky", "小王"}});

但是,事实上每个dispatch发出之后,所有reducer都会被调用一遍(只是大部分事不关己,直接返回自己的state),最终会返回一个完整的状态树,就像上面看到的样子。

编码建议

对于复杂的应用,可以编写多个reducer,每个reducer专注处理一类state。

可以将多个reducer的实现放到一个文件里实现,也可以每个reducer使用一个单独的文件(便于分工)。

转载于:https://blog.51cto.com/livestreaming/2313439

你可能感兴趣的文章
(转)用CSS3移除点击交互元素的高亮背景
查看>>
SpringBoot的注解:@SpringBootApplication注解 vs @EnableAutoConfiguration+@ComponentScan+@Configuration...
查看>>
在网页上嵌入 PowerPoint 演示文稿
查看>>
javascript日期格式化函数,跟C#中的使用方法类似
查看>>
SKY IM-A800S 驱动下载
查看>>
应用程序 数据缓存
查看>>
第二条:遇到多个构造器参数(Constructor Parameters)时要考虑用构建器(Builder)
查看>>
贴片电阻分类、阻值、功率、封装、尺寸
查看>>
【Eclipse】eclipse中设置tomcat启动时候的JVM参数
查看>>
国际化环境下系统架构演化
查看>>
openlayers入门开发系列之批量叠加zip压缩SHP图层篇
查看>>
Javascript调用Webservice的多种方法 .
查看>>
Linux 启动、关闭、重启网络服务
查看>>
Sublime Text 相关
查看>>
深入理解css优先级
查看>>
android的armeabi和armeabi-v7a
查看>>
android自己定义控件系列教程-----仿新版优酷评论剧集卡片滑动控件
查看>>
lvs之 lvs+nginx+tomcat_1、tomcat_2+redis(lvs dr 模式)
查看>>
让“是男人就下到100层”在Android平台上跑起来
查看>>
hdu4292Food(最大流Dinic算法)
查看>>