注1:本文主要根据 "自述|redux中文文档" 学习的个人总结记录。也是是为了更快更好的学习和接受redux的操作,更好的应用的项目中。原文档地址:
注2:本文较长,可能会需要花一点时间去阅读和理解。一. 简要核心
- 我们的应用中只会存在单一的Store.
- 应用中的State都是以对象树的形式在Store中.
- 改变每一个State的方法就是通过触发Action.
- 触发Action后,通过Reducer中定义的规则改变State,然后Reducer中返回一个新的State.
这是网上找的一个redux的数据驱动图,可以看到视图层(view)通过触发action,根据事先定义好的某些规则(reducer)改变store(state以对象树的形式在store中)中的内容,最后store中的内容又会呈现在视图层(view)。
看下下面的代码及注释:
import {createStore} from 'redux'//1.这个counter是我们定义的一个reducer,reducer一定要返回一个state,不然会报错。//2.(state, action) => state, reducer是形如这种格式的纯函数function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1; default: return state; }}//创建store存储应用的状态,有以下几个方法{ subscribe, dispatch, getState }。let store = createStore(counter); //这里知道createStore是创建一个redux store存放应用的状态。// 通过subscribe订阅获取最新的数据store.subscribe(() => console.log(store.getState()));//1.改变内部 state 惟一方法是 dispatch 一个 action(action是一个普通对象)。//2.可以看到此时触发了action,它会对应reducer中的规则给state加1然后返回新的statestore.dispatch({ type: 'INCREMENT' });
二. reducer的三大原则
关于redux的三大原则,从简要核心中的一些关键字就可以看出来,单一、只读、纯函数。
- 单一的数据源 应用中的state存在一个对象树中,并且这个对象树存在唯一的Store中。
- State只读 只有通过action才可以触发State的改变(action是一个用于描述发生某个事件的对象),这样确保了除了触发action操作,其他任何的操作都无法改变state的内容
- 通过Reducer改变State Reducer是一个纯函数,它接受之前的的state和action,并返回一个新的state,随着应用的扩大可能会有多个小的reducer,分别操作state对象树中不同的部分。最后可以通过combineReducers这个方法将每个小的reducer进行合并成一个根reducer。
总结
通过这一节应该初步了解了redux是怎么回事,是如何保存数据,改变数据的。了解redux的主要三个核心内容state,action,reducer之间联系。下面一章我们会详细介绍这三个核心概念以及数据的流动。