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是状态机。       应该包括:那些可能被组件的事件处理器改变并触发用户界面更新的数据,譬如需要对用户输入,服务器请求或者时间变化等作出响应。...
  • zwp438123895
  • zwp438123895
  • 2017年04月06日 10:44
  • 5212

基于react+redux的轻量级框架dva初使用及应用逻辑分析

随着React的大火,flux架构也跟着火了起来,Redux是实现flux架构的库中的佼佼者,使用react+redux来开发应用的开发者也越来越多 确实,React+Redux+webpack...
  • qq_33858965
  • qq_33858965
  • 2017年10月07日 14:13
  • 2779

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

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

ReactNative-Redux实际应用

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

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

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

从零开始的Android新项目10 - React Native & Redux

从零开始的Android新项目10 - React Native & Redux
  • u013651026
  • u013651026
  • 2017年12月26日 16:36
  • 203

react native基于redux架构实现登陆和购物车

关于react redux概念性的东西可以阅读Redux中文文档和阮一峰老师的redux入门教程,但是实践出真知,所以上手才是最重要的,下面就是基于redux的实现,请看截图: 分两块描述,先说登...
  • bestlbw
  • bestlbw
  • 2017年02月20日 00:01
  • 904

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

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

React-Native学习笔记——react-redux最佳实践应用篇

效果图典型的tab导航应用界面路由使用的是react-native-router-flux(简称rnrf),基于react-navigation,这两者目前还都不稳定rnrf中主要的概念有:Route...
  • u012455070
  • u012455070
  • 2018年01月18日 16:03
  • 62

React native 与redux

react native 采用react js 进行编写,这样就同样存在react的问题: state的管理问题组件之间的通讯问题 早期为解决此类问题,facebook开发了flux,fl...
  • xintros
  • xintros
  • 2018年01月09日 22:40
  • 27
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React Native之Redux使用详解之Reducers(30)
举报原因:
原因补充:

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