脚本宝典收集整理的这篇文章主要介绍了

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

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过