[Redux] Implementing combineReducers() from Scratch

The combineReducers function we used in previous post:

const todoApp = combineReducers({
  todos,
  visibilityFilter
});
  • It accepts and object as agruement;
  • It returns an function

Implemente by ourself:

 // reducers: {todos: todos, filter: filter}
const combineReducers = (reducers) => {
   // return a reducer function
  return (state={},action)=>{
     // combine the reducers
    return Object.keys(reducers)
      .reduce( (acc, curr)=>{
        acc[curr] = reducers[curr](
          state[curr],
          action
        ); // todos: todos

      return acc;
    }, {})
  }
};
时间: 2024-10-16 22:49:43

[Redux] Implementing combineReducers() from Scratch的相关文章

[Redux] Implementing Store from Scratch

Learn how to build a reasonable approximation of the Redux Store in 20 lines. No magic! const counter = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }

Redux 中 combineReducers实现原理

使用一个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进行判断和处理,传入

4 react 简书 引入 redux 的 combineReducers 对 redux 数据进行管理

1. src 下的 common 下的 header 创建 store 文件夹 下创建 reducer.js # src/common/header/store/reducer.js const stateDefault = { focused : false }; export default (state = stateDefault, action)=>{ if(action.type === 'focus' || action.type === 'blur'){ const newSta

Flux --> Redux --> Redux React 入门 基础实例使用

本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推荐使用 ES6+React+Webpack 的开发模式,但Webpack需要配置一些东西,你可以先略过,本文不需要Webpack基础 入门,只是一些基础概念和用法的整理,更完整的内容推荐去看看文档,英文,中文 (不过我个人认为,官方文档的例子相对来说太复杂了,很难让新手马上抓住重点) (官方的例子正

redux使用过程中遇到的两个致命的关键点

一.在reducer中,返回的state必须是全新的对象,否则,redux不会执行listening方法,因为redux会认为state没有更新过,没必要重新渲染view. 出现问题的例子: const user=(state={name='',age=0},action)=>{ switch(action.type){ case 'CHANGE_NAME': state.name='zhangsan';//在原object中修改name return state; default: retur

Redux状态管理方法与实例

状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http://cn.redux.js.org/index.html 前言 虽然官方文档上说只需几分钟就能上手 Redux,但是我个人认为即便你看个两三天也可能上手不了,因为文档里面的知识点不仅数量较多,而且还艰涩难懂,不结合一些实例来看很难用于实际项目中去. 但是不要担心自己学不会,这不我就给大家带来了这篇干

React:redux+router4搭建应用骨架

短期内关于react的对后一篇笔记.假设读者对redux和router4有基本了解. 缘由: 现在网上很多关于react+redux的文章都是沿用传统的文件组织形式,即: |--components |--reducers |--actionTypes |--actions |--else 这样的目录形式.这种形式的一个好处是:store中的状态一开始就是完整的,在按需加载的时候不需要特意更新root reducer和全局state树,只加载对应的视图即可. 但是,笔者在学习<深入浅出react

Which is the best opencv or matlab for image processing?

http://www.researchgate.net/post/Which_is_the_best_opencv_or_matlab_for_image_processing Annette Morales-González · Centro de Aplicaciones de Tecnologias de Avanzada It depends on your purpose: Matlab --> Faster programming, less efficientOpenCV -->

从零实现来理解机器学习算法:书籍推荐及障碍的克服

前部为英文原文,原文链接:http://machinelearningmastery.com/understand-machine-learning-algorithms-by-implementing-them-from-scratch/ 后部为中文翻译,本文中文部分转自:http://www.csdn.net/article/2015-09-08/2825646 Understand Machine Learning Algorithms By Implementing Them From