首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将reducer包含到combineReducers中,就会缺少一些东西

将reducer包含到combineReducers中,会导致一些东西缺失。

在Redux中,reducer是一个纯函数,用于处理应用程序状态的变化。combineReducers是Redux提供的一个辅助函数,用于将多个reducer合并成一个根reducer。当我们将reducer包含到combineReducers中时,combineReducers会根据每个reducer的key值来创建一个新的state对象,并将每个reducer返回的state值作为对应key的值。

然而,如果将reducer包含到combineReducers中,可能会导致一些东西缺失。这是因为combineReducers只会将每个reducer返回的state值作为对应key的值,而不会对state进行深层次的合并。如果某个reducer返回的state值是一个对象,而不是一个简单的值,那么在包含到combineReducers中后,该对象的属性将会丢失。

为了解决这个问题,可以使用immutable.js等库来处理state的不可变性,或者在reducer中返回一个新的对象,而不是修改原始的state对象。这样,在包含到combineReducers中后,就不会出现缺失的情况。

总结起来,将reducer包含到combineReducers中可能会导致一些东西缺失,需要注意处理state的不可变性,或者返回一个新的对象来避免缺失。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

手写一个Redux,深入理解其原理

我们还是老套路,从基本的用法入手,然后自己实现一个Redux来替代源码的NPM,但是功能保持不变。...,React-Redux关注的是怎么Redux跟React结合起来,用到了一些React的API。...要替换这个Redux,我们得先知道他里面都有什么东西,仔细一看,我们好像只用到了他的一个API: createStore:这个API接受reducer方法作为参数,返回一个store,主要功能都在这个...手写combineReducers combineReducers也是使用非常广泛的API,当我们应用越来越复杂,如果所有逻辑都写在一个reducer里面,最终这个文件可能会有成千上万行,所以Redux...提供了combineReducers,可以让我们为不同的模块写自己的reducer,最终将他们组合起来。

48841

造一个 redux 轮子

比如打包出来有 2 个 JS,第一个先加载了 reducer,第二个加载新的 reducer,这里可以用 combineReducers 去完成合并。...dispatch 的情况 // 如果直接用上面 dispatch 会有闭的问题,构建的时候都会指向初始时的 dispatch,可能会出现一些奇奇怪怪的 Bug // 因此这里用了新生成的函数...剩下的就是一些“杂鱼”函数了。 combineReducers 一个非常无聊的函数,仅仅一堆的 reducer 合并一个 reducer 而已。...isPlainObject(action)) { return '都说了 action 要是普通的 Object 了,还传一些乱七八糟的东西进来??'...组合,变成 mid1(mid2(mid3())) 无限套娃的形式 实现 combineReducers,主要作用是多个 reducer 组件成一个新 reducer,执行 dispatch 后,所有

1.5K20

Flux --> Redux --> Redux React 基础实例教程

推荐使用 ES6+React+Webpack 的开发模式,但Webpack需要配置一些东西,你可以先略过,本文不需要Webpack基础 入门,只是一些基础概念和用法的整理,更完整的内容推荐去看看文档,...它可能长这样子,建议是遵循官方的 一些规范 let upAction = { type: 'UP' }; 我们不止会传type,还会传一些值,如果传不同的值就let一次就太冗杂了,一般来说就会用一个方法代替...组,返回一个统一的新的reducer,且新的reducer返回一个新的state 看看Redux的实现,完整多了 1 function combineReducers(reducers) { 2...,那各个reducer函数的state是整个statereducer同名属性的值 let reducer = combineReducers({upReducer, downReducer});...React-Redux 4.1 引入库 与引入Redux类似,你可以使用Webpack引入或浏览器直接引入这个库 然后在全局window下可以获取到这个对象,取一些用到的属性如 let {Provider

3.7K20

redux

后续我们即可以通过this.props.store来调用store , document.querySelector('#root') ) 六、redux一些处理...在redux里要更改数据,必须通过reducer来更改,触发reducer的惟一方式是dispatch一个action, 只要dispatch了action,所对应的reducer就会执行,reducer...action里要用到的type值,用变量存起来,变量值为字符串即下面的做法,后面我们type类型用变量引入,加入不存在这个变量的话,就会出现undefined报错 // 定义action的类型 export...,可能有很多个reducer,这时我们可以把reducer提到一个文件夹单独编写,每一个reducer的名字取为文件名,然后暴露出去,在从index.js文件里使用reduxcombineReducers...所有reducer暴露出去 ?

84620

优雅地乱玩 Redux-1-Getting Started

Redux会保存最后结合起来了的State并且调用各个监听器 Key Concepts Reducer 关于多个同级Reducer Store 个人笔记, 基于官方英文教程, 添加了一些批注...甚至可以在 AJAX callback , 或者 setInterval 里面调用 action 的格式如下: { type: 'LIKE_ARTICLE', articleId: 42 } { type...Root Reducer 会将所有 sub reducer 的结果给结合起来并返回 参考下文提到的combineReducers()的使用示例 4....reducer 来处理, reducer 仅仅返回下一个状态 pure function: 可以根据传入的值预测结果,并且不会影响其他值, 即不改变传入的值也不会创建闭 因为 reducer...可以通过combineReducers函数返回多个 sub-Reducer, 例如上面返回了a和b两个 reducer import { combineReducers } from 'redux'

21820

React面试之生命周期与状态管理

函数返回一个函数,也就是合并后的 reducer 函数 // 该函数返回总的 state // 并且你也可以发现这里使用了闭,函数里面使用到了外面的一些属性 return function combination...// 所以你在 combineReducers 传入的参数的 key 即代表了 各个 reducer 也代表了各个 state const previousStateForKey = state...nextState : state } } combineReducers 函数主要用来接收一个对象,参数过滤后返回一个函数。...该函数里有一个过滤参数后的对象 finalReducers,遍历该对象,然后执行对象的每一个 reducer 函数,最后新的 state 返回。...// 这是执行的第一个用于抛错的函数 function assertReducerShape(reducers) { // combineReducers 的参数遍历 Object.keys(

29940

从应用到源码-深入浅出Redux

思路 整体思路我画了一张草图来给大家提供一些思路,核心其实就是在 createStore 通过闭的形式访问内部的 state 从而进行一系列操作。 当然,也许现在对于这张图你会感到疑惑。...之后调用传入的 currentReducer 函数,传入旧的 state 以及传入的 action 执行 reducer reducer 返回的结果重新赋值给 currentState。...那么由于第一次派发 action 时任何东西都不会匹配并且传入 reducer 的第一个参数 state 是存在值的(loadedState)。...源码解读 上述其实我们已经实现了 redux combineReducers 的所有核心逻辑,源码对于 combineReducers 的逻辑无非是比我们实现的版本增加了一些边界条件的处理。...源码是利用 reducer 形成一层一层闭引用参数的关系,从而实现中间件的逻辑调用的。

1.3K10

react+redux+webpack教程2

的数据流工作方式,所以代码看起来比较多, 肯定比一些MVVM框架双向绑定一对双大括号代码要多得多。...在程序运行过程,我们主要关心的就是这个仓库的状态如何变化。 如何变化?那就要靠reducer。针对一个动作,仓库里会有一个或多个状态发生变化,reducer就是要指导状态如何变化。...当change事件被触发时,通过this.props.dispatch函数就可以通知仓库有动作发生了, 仓库此时就会调用所有的reducer来应对这个事件。 好了,到这里小小的双向绑定功能实现了?...redux(flux)强调单向数据流, 单向数据流就像生产流水线,原料被各个工序依次加工,最终成为产品,而在这个过程要避免外界因素对各个阶段的原料产生影响, 否则就会出现非预期的产品(次品)。...纯函数就像这个流水线的工序,让数据处理的过程简单明了。 发现了吗?前面的代码纯函数是主力。reducer很明显是纯函数。

1.3K70

手写一个Redux,深入理解其原理-面试进阶_2023-02-28

我们还是老套路,从基本的用法入手,然后自己实现一个Redux来替代源码的NPM,但是功能保持不变。...,React-Redux关注的是怎么Redux跟React结合起来,用到了一些React的API。...要替换这个Redux,我们得先知道他里面都有什么东西,仔细一看,我们好像只用到了他的一个API: createStore:这个API接受reducer方法作为参数,返回一个store,主要功能都在这个...手写combineReducers combineReducers也是使用非常广泛的API,当我们应用越来越复杂,如果所有逻辑都写在一个reducer里面,最终这个文件可能会有成千上万行,所以Redux...提供了combineReducers,可以让我们为不同的模块写自己的reducer,最终将他们组合起来。

55730

React、Flux以及Redux小结

本人学习这两个框架已经有很长一段时间了,当下对其做一些基本概念梳理总结,利人利己。 Flux Flux是什么 Flux是一种架构思想,专门解决软件结构问题,它和MVC是同一种东西。...,多个reducer通过combineReducers方法合并为一个根reducer,这个根reducer负责维护完整的state; 当action发起的时候,store会调用dispatch方法,...执行,而是放在reducer;Redux中所有reducer都由根Reducer统一管理,对应一个根View。...所以,Redux提供了解决方案,那就是将其拆分开来,同时Redux又提供了一个combineReducers方法 用这个方法可以各个子Reducer合并成一个大的Reducer。..., userName }; export default todoApp; 可以所有的子Reducer放在一个文件里面,然后统一引入 import {combineReducers} form

63010

手写一个Redux,深入理解其原理-面试进阶

我们还是老套路,从基本的用法入手,然后自己实现一个Redux来替代源码的NPM,但是功能保持不变。...,React-Redux关注的是怎么Redux跟React结合起来,用到了一些React的API。...要替换这个Redux,我们得先知道他里面都有什么东西,仔细一看,我们好像只用到了他的一个API: 参考 前端react面试题详细解答createStore:这个API接受reducer方法作为参数,返回一个...提供了combineReducers,可以让我们为不同的模块写自己的reducer,最终将他们组合起来。...要手写combineReducers,我们先来分析下他干了啥,首先它的返回值是一个reducer,这个reducer同样会作为createStore的参数传进去,说明这个返回值是一个跟我们之前普通reducer

48900

手写一个Redux,深入理解其原理

我们还是老套路,从基本的用法入手,然后自己实现一个Redux来替代源码的NPM,但是功能保持不变。...,React-Redux关注的是怎么Redux跟React结合起来,用到了一些React的API。...要替换这个Redux,我们得先知道他里面都有什么东西,仔细一看,我们好像只用到了他的一个API: createStore:这个API接受reducer方法作为参数,返回一个store,主要功能都在这个...提供了combineReducers,可以让我们为不同的模块写自己的reducer,最终将他们组合起来。...要手写combineReducers,我们先来分析下他干了啥,首先它的返回值是一个reducer,这个reducer同样会作为createStore的参数传进去,说明这个返回值是一个跟我们之前普通reducer

42830

redux 文档到底说了什么(下)

slice 分类,并暴露 reducer 手动 Normalization: todos 数据结构变成 {ids: [], entities: {}} 结构 使用 redux-thunk 来做异步,...手动返回函数 手动使用表驱动来替换 reducer 的 switch-case 模式 手动 selector 进行封装成函数 手动引入 immer,并使用 mutable 写法 以前的写法理解起来真的不难...= combineReducers({ todos: todosSlice.reducer, filter: filterSlice.reducer, loading: loadingSlice.reducer...createSlice 上面的代码我们看到是用 combineReducers 来组装大 reducer 的,前文也说过 todos, filter, loading 其实都是各自的 slice,redux-toolkit...这里一定要注意:createAction 和 createReducer 是并列的,createSlice 类似于前两个的结合,createSlice 更强大一些

76320

redux工程化结构

一、简述 redux的工程化管理 1.reducer的模块化划分:每一个板块有一个自己对应的reducer,最后基于一些方法把所以的reducer合并即可; 2.基于actionCreator统一管理每次派发需要的行为对象...,而且和reducer一样,也是分板块管理的; 3.把dispatch和reducer校验时候需要的行为标识(type)进行统一管理 目录建设 store store存放的是redux中使用的东西 action...: action文件夹存放的是actionCreator内容 reducer reducer文件夹存放的是每个板块自己对应的reducer actionTypes.js 存储项目中需要的所以行为标识 index.js.../index.js //(利用combineReducers函数合并不同的reducer) import vote from '..../person' import {combineReducers} from 'redux' let reducer = combineReducers({ vote, person }

47530

Redux 包教会(二):趁热打铁,重拾初心

combineReducers:组合拆分状态的 Reducers 当应用逻辑逐渐复杂的时候,我们就要考虑巨大的 Reducer 函数拆分成一个个独立的单元,这在算法中被称为 ”分而治之“。...组合多个 Reducer 当我们 rootReducer 的逻辑拆分,并对应处理 Store 中保存的 State 的属性之后,我们可以确保每个 reducer 都很小,这个时候我们就要考虑如何这些小的...接着我们通过对象简洁表示法, todos 和 filter 作为对象属性合在一起,然后传递给 combineReducers 函数,这里 combineReducers 内部就会对 todos 和 filter...通过 combineReducers 组合 todos 和 filter reducer 之后,从 React 组件 dispatch Action会遍历检查 todos 和 filter reducer...删除不必要的代码 当我们原 rootReducer 拆分成了 todos 和 filter 两个 reducer ,并通过 redux 提供的 combineReducers API 进行组合后,我们之前在

2.3K40

React 和 Redux 的动态导入

这允许 Webpack 在构建时每个入口点拆分为单独的。 如果我们知道我们的应用程序的哪些部分将被浏览最多,这是完美的。 动态导入使用的是 Webpack 的 import 方法来加载代码。...我们可以通过暴露每个模块的 reducer 来扩展它。 还需要公开一个名称,在该名称下我们的模块状态存在于应用程序的store 。...我们需要能够在模块加载时注册模块的 reducer。因此,当我们的模块 dispatche 一个 action 时,我们的 store 就会更新。...我们两种新方法添加到我们的 store 。 然后,这些方法的每一种都完全取代了我们 store reducer。...剩下的唯一部分就是把 reducer 注册到 store

2.1K00
领券