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

写在前面

这一系列是我在学习redux时的同步笔记，学习资料为：Redux中文文档。

动机

背景： 单页应用，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);

Next: Redux学习笔记-Vol.2-基础

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!