一步一步学习 ReactNative + Redux（1）

写在开始

上篇中，完成了 TODO 列表展示， TODO 项状态更改，添加新 TODO。http://www.jianshu.com/p/4ceff3bbb414
只是使用的 React Native 方式控制 state，这里，我们开始使用 Redux 控制 state，也就是 React Native + Redux 开发。

源码：https://github.com/eylu/web-lib/tree/master/ReactReduxDemo/app_step1

Redux 简介

Redux 三宝： Store 、Action 、Reducer。

Action: 所做操作的描述

其本质上是一个 JavaScript 对象，包括一个必须的字段 type ，以及其它数据项。类似于这样 { type: 'ACTION_NAME', attr1: 'data1', attr2: 'data2' } 。然而，我们会使用函数 ActionCreator(args) 来创建 Action 。

例如：添加 TODO 项，我们会使用下面的函数来创建 Action，带有 TODO 项的名称。并且，我们会把 Action 的 type 字段用常量赋值，不直接使用字符串，以便更好的管理与引用。

const ADD_TODO = 'ADD_TODO';function addTodo(text){    return {type: ADD_TODO, text}}

Reducer: 状态 state 更新函数

它是一个纯函数，接收两个参数：state 、action，返回一个新的 state

(state, action) => state

注意：谨记 reducer 一定要保持纯净。
只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用，没有 API 请求、没有变量修改，单纯执行计算。

举例：

const ADD_TODO = 'ADD_TODO';function myReducers(state=[], action){    switch(action.type){                    case ADD_TODO:            return [                ...state,                {                    title: action.text,                    status: false,                }            ]        default:            return state;    }}调用：// 这里是 Action (ActionCreator)function addTodo(text){    return {type:ADD_TODO, text}}// 这里是 Statelet state = [{title: '吃早饭',status:true},{title: '打电话',status:false}];let newState = myReducers(state, addTodo('看电视'));  // newState =>  [{title: '吃早饭', status: true},{title: '打电话', status: false}, {title: '看电视', status: false} ];

实际应用中，我们并不会这样使用 reducer ，这里只是展示一个返回结果。
实际上，我们会这样使用 reducer
1、创建 store ，将 reducer 作为参数传入
2、使用 store 派发(dispatch) 操作(action)
3、store 内部执行 reducer

Store: 状态 state 容器

它不仅是 state 容器，更是将 reducer 与 action 连接到了一起。
Store 有以下职责：

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

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

创建 Store

store 的创建很简单，使用 redux 提供的 createStore() ，并传入两个参数，reducer 和 state
reducer : 随着应用的壮大，reducer 也变得复杂，我们需要将其拆分成小的 reducer ，并使用 combineReducers() 合并成一个 reducer 。
state : 初始状态，可选。

使用示例：

import { createStore, combineReducers } from 'redux';function reducers(state, action){ ... }function actionCreator(args){ ... }let store = createStore(reducers)  // 或者let store = createStore(reducers, {key1:'data1'})store.getState() store.dispatch(actionCreator)// 使用 combineReducers 创建 Storefunction reducer1(state, action){ ... }function reducer2(state, action){ ... }let combine = combineReducers({    reducer1,    reducer2});let store = createStore(combine)

Redux 使用的三原则

1、Single source of truth
单一数据源。整个应用的state，存储在唯一一个object中，同时也只有一个store用于存储这个object.
2、State is read-only
状态是只读的。唯一能改变state的方法，就是触发action操作。action是用来描述正在发生的事件的一个对象。
3、Changes are made with pure functions
在改变state tree时，用到action，同时也需要编写对应的reducers才能完成state改变操作。

React 与 Redux 配合

其实，Redux 并不是 React 的专属，不一定与 React 配合使用。它可以与 React、Angular、Ember、jQuery 甚至纯 JavaScript 等一起使用。
但是，像 React 这种 state => UI 类型的框架与之配合，使用起来还是很爽的！！

react-redux

我们可以使用 react-redux 这个工具把 React 与 Redux 联系起来。它提供两个功能： Provider 、 Connect。
Provider : 一个 Component ，用来包裹应用程序的根组件(入口组件)，提供 store 属性，以供子组件使用。使用方法类似于这样：

let store = createStore(()=>{});<Provider store={store}>       <HomeContainer /></Provider>

Connect : 见名知意，将包装好的组件连接到Redux。尽量只做一个顶层的组件，或者 route 处理。从技术上来说你可以将应用中的任何一个组件 connect() 到 Redux store 中，但尽量避免这么做，因为这个数据流很难追踪。使用方法类似于这样：

export default connect()(HomeContainer)  // 它将我们的容器组件 `HomeContainer` 连接到 Redux。

理解数据流

这里是 react 数据流

react 数据流.png

这里是 react + redux 数据流

react + redux 数据流.png

不再多说，上代码！！！

React + Redux 开发

新建项目 ReactReduxDemo (从新开始)

react-native init ReactReduxDemo

安装

我们要安装 redux 和 react-redux，在终端中进入到项目目录，执行安装命令：

cd ReactReduxDemonpm install redux react-redux --save

我们来看一下项目结构与package，如下所示：

|--ReactReduxDemo    |--__tests__    |--android    |--ios    |--node_modules    |--index.android.js    |--index.ios.js    |--package.json    |--...

package.json文件

{    "name": "ReactReduxDemo",    "version": "0.0.1",    "private": true,    "scripts": {        "start": "node node_modules/react-native/local-cli/cli.js start",        "test": "jest"    },    "dependencies": {        "react": "15.4.1",        "react-native": "0.38.0",        "react-redux": "^4.4.6",  // react-redux 依赖包        "redux": "^3.6.0",        // redux 依赖包    },    "jest": {        "preset": "react-native"    },    "devDependencies": {        "babel-jest": "17.0.2",        "babel-preset-react-native": "1.9.0",        "jest": "17.0.3",        "react-test-renderer": "15.4.1"    }}

接下来，我们搭建我们的项目结构，并且，前面已经介绍， store 的创建需要 reducer ，状态 state 的更新需要 action。所以，为了方便以后的结构管理，我们先做如下操作：
创建 app 文件夹，
创建 app/index.js 入口文件，
创建 app/components 文件夹，
创建 app/containers 文件夹，
创建 app/reducers 文件夹（存放所有的拆分为小的 reducer 文件），
创建 app/actions 文件夹（存放所有的拆分为小的 action 文件）。
现在，我们的项目结构，如下：

|--ReactReduxDemo    |--__tests__    |--android    |--app        |--actions        |--components        |--containers        |--reducers        |--index.js    |--ios    |--node_modules    |--index.android.js    |--index.ios.js    |--package.json    |--...

项目结构已经搭好，接下来，我们开始

写代码

1、稍微修改 ReactReduxDemo/index.ios.js 文件

import React, {    Component} from 'react';import {    AppRegistry,    StyleSheet,    View} from 'react-native';import RootWrapper from './app/index';     // 引入入口文件export default class ReactReduxDemo extends Component {    render() {        return (            <View style={styles.container}>                <RootWrapper />            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        backgroundColor: '#F5FCFF',    }});AppRegistry.registerComponent('ReactReduxDemo', () => ReactReduxDemo);

2、入口文件 ReactReduxDemo/app/index.js ，修改如下：

import React, { Component } from 'react';import {    View,    StyleSheet,} from 'react-native';import HomeContainer from './containers/home.container';  // home 容器export default class RootWrapper extends Component{    render(){        return (                                <View style={styles.wrapper}>                    <HomeContainer />                </View>        );    }}const styles = StyleSheet.create({    wrapper: {        flex: 1,        marginTop: 20,    },});

容器组件 ReactReduxDemo/app/containers/home.container.js，如下：

import React, { Component } from 'react';import {    View,    Text} from 'react-native';export default class HomeContainer extends Component{    constructor(props){        super(props);    }    render(){        return (            <View>                <Text>Hello Redux !</Text>            </View>        );    }}

运行项目，如下所示：

Paste_Image.png

使用 Redux

这里，我们所做任务如下：

• 创建 store，并带有初始数据
• 使用 Provider connect()
• 显示初始数据

1、我们先创建一个子组件 TodoListComponent 来展示测试数据

新建文件 ReactReduxDemo/app/components/todo-list.component.js，如下：

import React, { Component } from 'react';import {    Text,    View,    StyleSheet,} from 'react-native';export default class TodoListComponent extends Component{    constructor(props){        super(props);    }    render(){        return (            <View style={styles.wrapper}>            {this.props.todoList.map((todo, index)=>{                var finishStyle = {textDecorationLine:'line-through', color:'gray'};                return (                    <Text style={[styles.todo,todo.status&&finishStyle]}>{todo.title}</Text>                );            })}            </View>        );    }}const styles = StyleSheet.create({    wrapper: {        paddingHorizontal: 20,    },    todo: {        paddingVertical: 5,    },});

这里的子组件 TodoListComponent 只是用 props 接收来自容器组件的数据，并以展示。

将容器组件 HomeContainer 稍作修改：

import React, { Component } from 'react';import {    View,    Text} from 'react-native';import TodoListComponent from '../components/todo-list.component';  // 引入子组件export default class HomeContainer extends Component{    constructor(props){        super(props);    }    render(){        return (            <View>                <TodoListComponent todoList={[{title:'测试数据'}]} />            </View>        );    }}

运行项目，如下显示：

Paste_Image.png

2、创建 store，并带有初始数据
修改入口文件，引入 redux、react-redux、reducers ，定义初始数据，创建 store ，使用 Provider 包裹根组件，并带上 store 属性（供被包裹的组件使用）。

ReactReduxDemo/app/index.js 文件，修改如下：

import React, { Component } from 'react';import {    View,    StyleSheet,} from 'react-native';import { createStore } from 'redux';        // 引入 redux 以创建 storeimport { Provider } from 'react-redux';     // 引入 react-redux，使用 Providerimport reducers from './reducers/index';    // 引入 reducersimport HomeContainer from './containers/home.container';// 这是初始数据const initState = {    todos: [        {title:'吃早饭',status:true},        {title:'打篮球',status:false},        {title:'修电脑',status:false},    ],};let store = createStore(reducers, initState);  // 创建 storeexport default class RootWrapper extends Component{    render(){        return (            <Provider store={store}>                <View style={styles.wrapper}>                    <HomeContainer />                </View>            </Provider>        );    }}const styles = StyleSheet.create({    wrapper: {        flex: 1,        marginTop: 20,    },});

新建文件 ReactReduxDemo/app/reducers/index.js (作为所有 reducer 的入口)，如下：

import { combineReducers } from 'redux';// 这是一个空的 reducer , 不做任何处理，返回原始 statefunction todoList(state=[], action){    return state;}const reducers = combineReducers({    todos: todoList           // 这里的 key 要与初始数据的 key 一致});export default reducers;

3、使用 react-redux 提供的 connect() 进行连接组件与redux。
容器组件 ReactReduxDemo/app/containers/home.container.js 文件，修改如下：

import React, { Component } from 'react';import {    View,    Text} from 'react-native';import { connect } from 'react-redux';    // 引入 react-reduximport TodoListComponent from '../components/todo-list.component';class HomeContainer extends Component{   // 这里，HomeContainer不再是默认export    constructor(props){        super(props);    }    render(){        return (            <View>                <TodoListComponent todoList={this.props.todoList} />   // 注意，这里的 todoList 是 mapStateToProps 返回的 key  （运行时，注释会报错，请删除注释）            </View>        );    }}// 基于全局 state ，哪些 state 是我们想注入的 propsfunction mapStateToProps(state){    return {        todoList: state.todos,  // 将全局的 state 的其中一个 key(即todos) 作为 props 注入    }}export default connect(mapStateToProps)(HomeContainer);  // 连接组件并export

3、运行项目，如下显示，则说明咱们使用 redux 成功了。

Paste_Image.png

到这里，我们成功的将 React 与 Redux 连接了起来，并显示了初始数据，
下篇中，我们会 dispatch(action) 更新状态操作！！！