Redux Reducer

什么是Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的。
action只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

reducer就是一个纯函数（Pure Function），接受就得state和action，返回新的state

(previousState, action) => newState

之所以将这样的函数称之为reducer，是因为这种函数与被传入 Array.prototype.reduce(reducer, ?initialValue) 里的回调函数属于相同的类型。

纯函数的定义:

如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数

该函数不会产生任何可观察的副作用（在函数内部与其外部的任意交互。这可能是在函数内修改外部的变量，或者在函数里调用另外一个函数等。)

处理Action

import { VisibilityFilters } from './actions'//Redux 首次执行时，state 为 undefined，此时我们可借机设置并返回应用的初始 state
const initialState = {visibilityFilter: VisibilityFilters.SHOW_ALL,todos: []
};function todoApp(state = initialState, action) {switch (action.type) {case SET_VISIBILITY_FILTER:return Object.assign({}, state, {visibilityFilter: action.filter})default:return state}
}

state = initialState ES6 参数默认值语法

注意：

不要修改 state。使用 Object.assign() 新建了一个副本。不能这样使用 Object.assign(state, { visibilityFilter: action.filter })，因为它会改变第一个参数的值。你必须把第一个参数设置为空对象。你也可以开启对ES7提案对象展开运算符的支持, 从而使用 { ...state, ...newState } 达到相同的目的。
在 default 情况下返回旧的 state。遇到未知的 action 时，一定要返回旧的 state。

Object.assign() 是 ES6 特性，但多数浏览器并不支持。你要么使用 polyfill，Babel 插件，或者使用其它库如 _.assign() 提供的帮助方法

合并reducer

现在我们可以开发一个函数来做为主 reducer，它调用多个子 reducer 分别处理 state 中的一部分数据，然后再把这些数据合成一个大的单一对象。主 reducer 并不需要设置初始化时完整的 state。初始时，如果传入 undefined, 子 reducer 将负责返回它们的默认值。

Redux 提供了 combineReducers(reducers) 工具类来合并reducer

import { combineReducers } from 'redux'function todos(state = [], action) {switch (action.type) {case ADD_TODO:return [...state,{text: action.text,completed: false}]case TOGGLE_TODO:return state.map((todo, index) => {if (index === action.index) {return Object.assign({}, todo, {completed: !todo.completed})}return todo})default:return state}
}function visibilityFilter(state = SHOW_ALL, action) {switch (action.type) {case SET_VISIBILITY_FILTER:return action.filterdefault:return state}
}const todoApp = combineReducers({visibilityFilter,todos
})export default todoApp

注意：每个 reducer 只负责管理全局 state 中它负责的一部分。每个 reducer 的 state 参数都不同，分别对应它管理的那部分 state 数据。

Redux Reducer相关推荐

redux reducer_如何通过约定创建Redux reducer
redux reducer Discover Functional JavaScript was named one of the best new Functional Programming bo ...
如何在10分钟内让Redux发挥作用
Hi everyone ❤️ 大家好❤️ For a while now I've been hearing my friends and colleagues complaining about h ...
[译】Redux入门教程（一）
前言老外写技术文章真是叼,这是国外的一个程序员写的一个简单易懂,循序渐进的Redux教程,本着共享的精神,就翻译出来给大家一起看,文章最后有链接,不想看我翻译的直接去看原文吧. 下面是原教程的英文目 ...
函数式编程在Redux/React中的应用
本文简述了软件复杂度问题及应对策略:抽象和组合:展示了抽象和组合在函数式编程中的应用:并展示了Redux/React在解决前端状态管理的复杂度方面对上述理论的实践.这其中包括了一段有趣的Redux推导 ...
Router入门0x205: react-route + redux + react 集成
0x000 概述这一章终于大集成了 0x001 集成react 源码 import React from 'react' import ReactDom from 'react-dom'class ...
react开发插件-ES7 React/Redux/GraphQL/React-Native snippets
内容目录 ES7 React/Redux/GraphQL/React-Native snippets 插件 Basic Methods React React Native Redux PropTyp ...
redux及react-redux
redux 这篇文章谈一谈仓库redux. 首先,学习任何东西都离不开官网.在此附上官网网址 Redux - A predictable state container for JavaScript ...
【React.js】之Redux
Redux概述 Redux = Reducer + Flux 安装ant design yarn add antd Store的创建 src目录下, 创建store文件夹,创建文件index.js i ...
React/ReactNative 状态管理终于懂了！redux redux-toolkit 与 rematch 对比总结
有同学反馈开发 ReactNative 应用时状态管理不是很明白,这个问题我之前刚接触 React 时也遇到过,看了好多文章和视频才终于明白,不得不说,React 及三方库这方面做的有点过于复杂了! ...
Redux入门0x101: 简介及`redux`简单实现
0x000 概述这一章开始讲redux,其实是承接前面的react,但其实作为一个框架来说,redux和react并没有太多的关系,本身是独立存在的.在我看来它们的关系不会比共用re开头更深了,所以 ...

Redux Reducer

什么是Reducer

处理Action

合并reducer

Redux Reducer相关推荐

最新文章

热门文章