React Native之Redux使用详解之Reducers(30)

原创 2016年08月28日 23:25:29

React Native之Redux使用详解之Reducers

一. Reducers

Actions 描述发生了什么,但不能指定响应中state怎么变化,这是Reducers的工作。

1. 设计State Shape

在Redux中,所有state存储为一个单一对象。写任何代码之前考虑好它的 Shape是一个好的注意。

对于我们的 todo 应用,我们想去存储两种不同事物:

  • 当前所选的可见性过滤器
  • todos 实际列表

你会发现在这个state树中你需要存储一些数据,以及一些UI状态。但是必须保持数据和 UI 状态分离。

{
    visibilityFilter: 'SHOW_ALL',
    todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}

【注意 Relationships】
复杂应用中,分离不同实体,各个实体相互依赖。官方建议保持你的 state 尽可能规范没有任何重叠。保持每个实体保存在一个带有ID作为key的对象中,通过IDs关联其他实体或者列表。可以假定认为app的state作为数据库。这个方式在normalizr’s 文档。例如,todosById: { id -> todo }

2. 操作Actions

如果现在已经确定好整个App的state对象, 接下来准备为App写一个Reducer. 该Reducer 是一个以前一状态数和一个action作为参数,返回新状态的纯函数.

(previousState,action) => newState

保持reducer纯函数是非常重要,我们不应该在一个reducer中做以下操作:

  • 复制传入的参数
  • 执行副作用操作,如 API 调用和路由转换
  • 调用非纯函数, 如 Date.now()Math.random().

    我将探索如何执行副作用在advanced walkthrough. 目前,我们只需记住reducer必须纯净. 它应该计算下一个状态并返回. No surprises. No side effects. No API calls. No mutations. Just a calculation

我们逐渐写一个reducer, 进而进一步理解之前提到的actions

我们以指定初始化状态开始写程序, Redux 第一次将传入 undefined的state到我们定义的reducer. 这是返回该APP初始化状态的时机.
Show your code:

import { VisibilityFilter} from './actions'

const initialState={
    visibilityFilter: VisibilityFilter.SHOW_ALL,
    todos:[]
}

function todo(state,action) {
  if(typeof state === 'undefined') {
    return initialState;
}

    // For now, don't handle any actions, and just return the state given us.
return state;

}

一巧妙技巧是利用ES6 默认语法(ES6 default arguments syntax) 更简洁的方式去写这段代码.

function todo(state=initialState,action){
// For now, don't handle any actions,and just return the state given to us.
 return state;
}

现在我们来操作 SET_VISIBILITY_FILTER. 我们需要做的就是改变状态visibilityFilter

function todo(state=initialState,action) {
  switch(action) {
    case 'SET_VISIBILITY_FILTER':
    return Object.assign({},state,{
    visibilityFilter:action.filter
    })
    default:
      return state;
    }
}

注意:
1. 我们没有复制state. 而是通过Object.assign()创建一个复制. Object.assign(state, {visibilityFilter: action.filter })是错误写法: 该写法将会复制第一个参数. 你也能学习object spread operator proposal 去写这个 {…state, …newState}.

2.我们返回前一状态在默认case.在一些未知的action情况下,我们需要返回前一状态.

3.Object.assign()
Object.assign()是ES6语法,但是它仍然没有被大多数浏览器实现, 开发者需要利用polyfill去写Babel plugin,或者利用其他的库,如_assign .
4.Note on switch and Boilerplate

The switch statement is not the real boilerplate. The real boilerplate of Flux is conceptual: the need to emit an update, the need to register the Store with a Dispatcher, the need for the Store to be an object (and the complications that arise when you want a universal app). Redux solves these problems by using pure reducers instead of event emitters.

It’s unfortunate that many still choose a framework based on whether it uses switch statements in the documentation. If you don’t like switch, you can use a custom createReducer function that accepts a handler map, as shown in “reducing boilerplate”.

版权声明:本文为博主原创文章,未经博主允许不得转载。

reactJS 干货(reactjs 史上最详细的解析干货)

一.  State和 Props       state是状态机。       应该包括:那些可能被组件的事件处理器改变并触发用户界面更新的数据,譬如需要对用户输入,服务器请求或者时间变化等作出响应。...

react-redux使用小结

redux使用小结redux使用小结 react-redux store reducer action 整合storereduceraction 补充 使用redux-dev-tools 让改变red...
  • ali1995
  • ali1995
  • 2016年11月21日 22:58
  • 2143

Redux之combineReducers(reducers)详解

转载请注明出处:大家好,最近有点忙,忙什么呢?忙着学习一个新的框架Redux,那么这个框架主要是用来做什么的,这篇博客暂时不做介绍,这篇博客针对有一定Redux开发基础的人员,所以今天我讲的重点是Re...

ReactNative-Redux实际应用

Redux刚开始我也是一头雾水,文章看着也是懵懵懂懂,经过多方查看别人写的文章,自己在动手实现在回头看别人写的也就那么回事。这里还是使用干活集中营的妹子接口来真实操作下Redux,建议一定要动手写写,...

基于Redux的ReactNative项目开发总结(一)

写在前面 上周把基于Redux的单页应用开发完 紧接着就开始了ReactNative的开发。真的快得不可思议,只花了一周时间,我们两个人就分工把APP也开发完了,并且同时兼容IOS操作系统和And...

《React-Native系列》24、 结合Demo学习Redux框架

8月的最后一天了,那就打响最后一炮吧!我们介绍了Flux框架,我们打算在接下来的项目里使用Redux框架,这两天简单学习了下Redux。打算结合一个Demo来讲解。 还是先来说说概念吧。 Redux ...

react-native,react-redux和redux配合开发

react-native 的数据传递是父类传递给子类,子类通过this.props.** 读取数据,这样会造成组件多重嵌套,于是用redux可以更好的解决了数据和界面View之间的关系, 当然用到的是...

React-Native 之 redux 与 react-redux

前言 本文 有配套视频,可以酌情观看。 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我讨论。 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关,如文中内...

React-Native开发总结-redux层面上的问题

更新时间:2017年11月08日17:31:16     新的技术不断出现,让开发者更加高效的工作,因此,需要学习和使用。在实际开发中,如果采用框架进行项目构建,组件的生命周期是重头戏,也是难点和重...

react-native 从简单的事件分发来介绍redux

转载请注明出处:王亟亟的大牛之路这两天组里来了几个新人,有的用过redux,有的没用过,为了让他们上手或者理解的更透彻,就写了个demo,代码逻辑来源于https://github.com/ninty...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React Native之Redux使用详解之Reducers(30)
举报原因:
原因补充:

(最多只允许输入30个字)