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

8月的最后一天了，那就打响最后一炮吧！

我们介绍了Flux框架，我们打算在接下来的项目里使用Redux框架，这两天简单学习了下Redux。打算结合一个Demo来讲解。

还是先来说说概念吧。

Redux 三个基本原则

• 单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

这让同构应用开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ，调试也变得非常容易。在开发中，你可以把应用的 state 保存在本地，从而加快开发速度。此外，受益于单一的 state tree ，以前难以实现的如“撤销/重做”这类功能也变得轻而易举。

• State 是只读的

惟一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
这样确保了视图和网络请求都不能直接修改 state，相反它们只能表达想要修改的意图。因为所有的修改都被集中化处理，且严格按照一个接一个的顺序执行，因此不用担心 race condition 的出现。 Action 就是普通对象而已，因此它们可以被日志打印、序列化、储存、后期调试或测试时回放出来。

• 使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。

我们再来介绍下Redux中有三个基本概念，Action，Reducer，Store。

Action

Action 本质上是 JavaScript 普通对象。我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量。当应用规模越来越大时，建议使用单独的模块或文件来存放 action。

代码如下：

export const addTodo = (num) => {  return {    type: 'INCREMENT',    num: num,  }}export const decTodo = (num) => {  return {    type: 'DECREMENT',    num: num,  }}export const updateText = (text) => {  return {    type: 'TEXT_UPDATE',    text: text,  }}

Reducer

reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。

(previousState, action) => newState

保持 reducer 纯净非常重要。永远不要在 reducer 里做这些操作：
1、修改传入参数；
2、执行有副作用的操作，如 API 请求和路由跳转；
3、调用非纯函数，如 Date.now() 或 Math.random()。

我们定义了2个reduce （reduceNum.js   reduceText.js）

reduceNum如下：

const todo = (state=0, action) => {  switch (action.type) {    case 'INCREMENT':      return state + 1    case 'DECREMENT':      return state - 1    default:      return state//返回原来的state  }}export default todo

reduceText如下：

const todo = (state="", action) => {  switch (action.type) {    case 'TEXT_UPDATE':    //新的state      return  action.text     default:      //返回原来的state      return state  }}export default todo

我们使用combineReducers 合并reduce

import { combineReducers } from 'redux'import reduceNum from './reduceNum'import reduceText from './reduceText'const todoApp = combineReducers({  num:reduceNum,  text:reduceText})export default todoApp

关于combineReducers 参考http://cn.redux.js.org/docs/api/combineReducers.html

Store

Store 就是把action和reduce联系到一起的对象。Store 有以下职责：

• 维持应用的 state；
• 提供 getState() 方法获取 state；
• 提供 dispatch(action) 方法更新 state；
• 通过 subscribe(listener) 注册监听器;
• 通过 subscribe(listener) 返回的函数注销监听器。

再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合 而不是创建多个 store。

根据已有的 reducer 来创建 store 是非常容易的。我们使用 combineReducers() 将多个 reducer 合并成为一个。现在我们将其导入，并传递 createStore()。

import reducers from './reducers'import { createStore } from 'redux'let initState = { num: 0,text:""};let store = createStore(reducers,initState);

createStore() 的第二个参数是可选的, 用于设置 state 初始状态。

好了，概念就介绍到这儿，贴下Demo的源码。

入口组件：

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';import { createStore } from 'redux'import { Provider } from 'react-redux'import reducers from './reducers'import AddTodo from './containers/AddTodo'class reduxdemo extends Component {  render() {    // let initState = { num: 0,text:""};    let store = createStore(reducers);    return (        <Provider store={store}>          <AddTodo />        </Provider>    )  }}AppRegistry.registerComponent('reduxdemo', () => reduxdemo);

视图组件：AddTodo

import React,{Component} from 'react'import {  AppRegistry,  StyleSheet,  Text,  View,  TouchableHighlight,  Dimensions,} from 'react-native';import { connect,Provider } from 'react-redux'import { addTodo,decTodo,updateText } from '../actions'const {width, height} = Dimensions.get('window');class AddTodo extends Component {    constructor(props) {      super(props);    }    render() {      const { dispatch,num ,text} = this.props      // alert(num);      return (        <View style={styles.container}>          <TouchableHighlight style={styles.itemView} underlayColor="red" onPress={()=>{dispatch(addTodo(num))}}>              <Text style={styles.itemText}>                点击我就+1              </Text>          </TouchableHighlight>          <TouchableHighlight style={styles.itemView} underlayColor="red" onPress={()=>{dispatch(decTodo(num))}}>              <Text style={styles.itemText}>                点击我就-1              </Text>          </TouchableHighlight>          <TouchableHighlight style={styles.itemView} underlayColor="red" onPress={()=>{dispatch(updateText('测试'))}}>              <Text style={styles.itemText}>                修改Text的值              </Text>          </TouchableHighlight>          <Text style={{paddingTop:10,color:'red'}}>            当前的Num值是:{num} ， 当前的Text值是：{text}          </Text>        </View>      )    }}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#f2f2f2',    marginTop:20,  },  itemView:{    backgroundColor:'grey',    height:44,    width:width,    justifyContent:'center',    marginTop:10,  },  itemText:{    fontSize:15,    color:'#ffffff',    textAlign:'left',    marginLeft:20,  },});//selector：这是你自己编写的一个函数。这个函数声明了你的组件需要整个 store 中的哪一部分数据作为自己的 props。function selector(state) {  return {    num: state.num ,    text:state.text  }}// 包装 component ，注入 dispatch 和 state 到其默认的 connect(selector)(App) 中；export default connect(selector)(AddTodo);

Demo运行的效果如下：

代码结构目录如下：

写在后面的话：

Redux真不是一两句话可以说清楚的，这里提供了一个简单的完整Demo，希望可以帮助到大家。

参考：http://cn.redux.js.org/index.html