Redux学习笔记-Vol.1-介绍

动机

背景： 单页应用，js需要管理很多state。
两个概念： 变化和异步
和React相结合： React在视图层禁止异步并直接操作DOM，Redux处理state中的数据。
目的： Redux试图让state变化的可预测。

三大原则

单一数据源

注意理解：整个应用的state被储存在一棵object tree中，并且这个object tree只存在于唯一一个store中。

State是只读的

唯一改变state的方法就是触发action，action是一个用于描述已发生事件的普通对象。

store.dispatch({
    type: 'ADD_ITEM',//规定一个action对象中必须有的type属性
    index: 1
});

使用纯函数来执行修改

为了描述action如何改变state tree，需要编写reducers。
什么是reducers？

纯函数，形如：(state, action) => state

随着应用的变大，注意将一个大的reducer拆分为多个小的reducers，分别独立操作state tree的不同部分。

//reducer 1
function visibilityFilter(state = 'SHOW_ALL', action){
    switch (action.type){
        case 'SET_VISIBILITY_FILTER':
            return action.filter;
        default://一定要有！不然会造成返回undefined的情况
            return state;
    }
}

//reducer 2
function todos(action = [], action){
    switch (action.type){
        case 'ADD_TODO':
            return [
                ...state,//ES6大法好!
                {
                    text: action.text,
                    complete: false
                }
            ];
        case 'COMPLETE_TODO':
            return state.map((todo, index) => {
                if (index == action.index){
                    return Object.assign({}, todo, {
                        complete: true
                    });
                }
                return todo;
            });
        default:
            return state;
    }
}

import { combineReducers, createStore } from 'redux';
let reducer = combineReducers({ visbilityFilter, todos });
let store = createStore(reducer);

Redux学习笔记-Vol.1-介绍