Action

是把数据从 服务器响应、用户输入或者其他非view的数据传到store的有效负载。它是store数据的唯一来源。一般来说，你会通过store.dispatch()将action传到store。

const ADD_TODO = 'ADD_TODO'

{
    type: ADD_TODO,
    text: 'Build my first Redux app'
}

Action创建函数

就是生成action的方法

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

调用：

dispatch(addToDo(text))

const boundAddToDo = text => dispatch(addToDo(text));

boundAddToDo(text);

Reducer

纯函数，接受旧的state和action，返回新的state

(previousState, action) => newState

永远不要在reducer里做这些操作：

修改传入参数
执行有副作用的操作，如API请求和路由跳转；
调用非纯函数，如Date.now()和Math.random(); reducer一定要保持纯净。只要传入参数相同，返回计算得到的下一个state就一定相同

import {VisibilityFilters} from './actions';
const initialState = {
    visibilityFilter: VisibilityFilters.SHOW_ALL,
    todos: []
};


function todoApp(state = initialState, action){
    switch(action.type) {
        case SET_VISIBILITY_FILTER:
            return Object.assign({}, state, {
                visibilityFilter: action.filter
            })
        default:
            return state
    }
    
}

Store

store的职责：

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

store的创建：

let store = createStore(todoApp)

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

数据流

redux应用中的数据的生命周期遵循下面4个步骤：

1.调用store.dispatch(action);,
action理解为新闻的摘要，即任务列表里添加了“学习Redux文档”
1. Redux store调用传入的reducer函数 reducer是纯函数，仅用于计算下一个state
3.根reducer应该把多个子reducer输出合并成一个单一的state树

搭配组件层次结构

一个显示todo项的列表。一个todo项被点击后，会增加一条删除线并标记completed。我们会显示用户新增一个todo字段。在footer里显示一个可切换的显示全部/只显示completed的/只显示incompleted的todos。

展示组件

todoList用于显示 todos 列表。数据和点击事件
todo 一个todo项
Link 带有callback回调功能的链接
footer 一个允许用户改变可见todo过滤器的组件
App 根组件

容器组件

visibleTodoList 根据当前状态来对todo列表进行过滤，并渲染TodoList
FilterLink 得到当前过滤器并渲染Link

其他组件

AddToDo含有add按钮的输入框