Redux 学习

Update 2018.10.09 : 不要讲当前组件不关心的state.props写入到mapStateToProps 方法中去，因为每当redux中state.props发生改变，订阅了该state.props的组件都会触发一遍render() 方法，在你不想让该组件刷新的情况下会出现问题。

Update 2018.08.06 : Redux 感觉上类似全局的KVO，是一种响应式编程，它所关心的问题就是数据的流动，根据数据流的变化，去对应体现在UI的变化之上。

1.由于React-Native是通过state的更新来更新组件，所以如何高效的管理和维护state是一个很重要的问题，而Redux正是管理应用state的一种方法。

Redux主要由三部分组成，Store： 存储state的数据结构，本质上就是一个对象，其本身是不可变的。Action：对state进行改变，描述发生了什么事件的对象。Reducer：根据Action对state进行更新的函数。

TIP：纯函数，意思是只对参数进行简单的计算，返回一个新的值给调用者，并不会改变传递进来的参数，而非纯函数会对传递进来的参数进行修改。

三大原则：Store是唯一的，State是只读的，使用纯函数来执行修改。

Action:

Action是把数据从应用传到Store的有效载荷，它是Store数据的唯一来源,一般通过store.dispatch()将Action传到Store。添加新todo任务的Action是这样的：
const ADD_TODO = 'ADD_TODO';

{
    type:ADD_TODO,
    text:'build my first redux app!'
}

Action本质上是JS的普通对象。我们约定，在Action中必须使用一个字符串类型的type字段表示接下来要执行的动作。多数情况下，type会被定义成字符串常量。当应用规模越来越大的时候，建议使用单独的模块或者文件来存放Action。
import {ADD_TODO, REMOVE_TODO} from '../actionTypes'
在Redux中，action创建函数返回一个action：

function addTodo(text){
    return{
        type:ADD_TODO,
        text
    }
}

Reducer:

Action只是描述了有事情发生这一事实，并没有指明应用应该如何更新State，这正是Reducer要做的事情。
reducer 就是一个纯函数，接收旧的action和state返回新的state。
(previousState，action) => newState
reducer一定要保持纯净，只要传入的参数相同，返回的state就一定相同。没有特殊情况、没有副作用，没有API请求、没有变量修改，单纯执行计算。

function todoApp (state = initialState, action){
    switch (action.type){
        case ACTION_ONE:
            return aStateOne;
        case ACTION_TWO:
            return aStateTwo;
        default:
            return state;
    }
}

注意：1）不要修改state，
2）未知的情况下一定要返回旧的state。

Store

Store有以下职责：
·维持应用的state
·提供getState()方法获取state
·提供dispatch(action)方法更新state
·通过subscribe(listener)注册监听器
·通过subscribe(listener)返回的函数注销监听器

经常用的几个方法:
connect([mapStateToProps],[mapDispatchToProps],[mergeProps],[options])

这个方法主要是为了连接React components和 Redux Store.

（1）mapStateToProps:(Function) 定义将state中的属性映射给组件使用。

const mapStateToProps = (state) =>{
    return {
        id:'001',
        name:'leon',
    }
}

（2）mapDispatchToProps:(Obj or Function) 将dispatch（Action）的动作传递给组件，使组件可以触发dispatch事件，完成state的更新。

const mapDispatchToProps = (dispatch) =>{
    return{
       addTodo:bindActionCreators({addTodo},dispatch), 
   }
}

or

const mapDispatchToProps = (dispatch) =>{
    return{
       onClick:(value) =>{
           dispacth（{ 
              type:'ADD_TODO',
              value:value，
        }） 
       }
   }
}