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-基础

    原文作者:kyrieliu
    原文地址: https://segmentfault.com/a/1190000007970493
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞