《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