Redux

一、Flux

Redux是Flux思想的另一种实现方式，通过了解Flux，可以知道Flux一族框架贯彻的最重要观点是单向数据流。 Flux认为MVC框架存在很大问题，它推翻了MVC框架，并用一个新的思维来管理数据流转。

二、Redux

Flux的基本原则是单向数据流，Redux在此基础上强调三个基本原则：

• 唯一数据源；
• 保持状态只读；
• 数据改变只能通过纯函数完成。

（1）唯一数据源

唯一数据源指的是应用的状态数据应该只存储在唯一的一个Store上。 这个唯一Store上的状态，是一个树形的对象，每个组件往往只是用树形对象上一部分的数据。

（2）保持状态只读

保持状态只读，就是说不能去直接修改状态，要修改Store的状态，必须通过派发一个action对象完成。

（3）数据改变只能通过纯函数完成

所说的纯函数就是Reducer，redux这个名字的前三个字母Red代表的就是Reducer。Redux名字的含义是Reducer+Flux。

在Redux中，每个reducer的函数签名如下：

reducer(state,action);

第一个参数state是当前的状态，第二个参数action是接收到的action对象。reducer就是根据state和action的值产生一个新的对象返回。reducer必须是纯函数，函数的返回结果必须是完全由参数state和action决定，而且不产生任何副作用，也不能修改参数state和action对象。

action

action： 是行为的抽象； 是普通js对象； 一般由方法生成； 必须有一个type；

示例：

const addTodo = (text) => {
    return {
        type: 'ADD_TODO',
        id: nextTodoId++,
        text
    }
}

reducer

reducer： 是响应的抽象 是纯方法 传入旧状态和action 返回新状态

示例：

const todo = (state, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                id: action.id,
                text: action.text,
                completed: false
            }
        case 'TOGGLE_TODO':
            if (state.id !== action.id) {
                return state;
            }
            return Object.assign({}, state, {
                completed: !state.completed
            })
        default:
            return state;
    }
}

store

action作用于store； reducer根据store响应； store是唯一的； store包括了完整的state； state完全可预测；

示例：

import {createStore}  from 'redux';
import todoApp from './reducers';

let store=createStore(todoApp);