redux源码学习笔记 - createStore
本篇是学习redux
源码的一些记录,学习的redux
版本是^4.0.1
。
在页面开发时,需要管理很多状态(state),比如服务器响应,缓存数据,ui状态等等···当页面的庞大时,状态就会变的混乱。redux就派上用场了,它最大的特点就是使状态变化变的可预测。
redux提供一个管理state的仓库(store
),并且规定了store
只能通过reducer
(函数)来更新,而reducer
必须通过dispatch(action)
来触发,action
就是普通的javascript对象,它约定了执行的类型并且传递数据。使得state的变化是可以预测的,同样的步骤会得到同样的state。
从第一步创建仓库开始看起 createstore(reducer, preloadedstate, enhancer)
。
开始已经提到redux是管理一个store,那么第一步就是创建store,一般最简单的就是以下形式:
let store = createstore(reducer,preloadedstate,enhancer);
- reducer是更新store的函数,必传参数,function类型
- preloadedstate为初始状态,为可选参数。如果reducer是使用 combinereducers 合并多个函数而成的,要注意preloadedstate的数据格式要和 combinereducers 中的keys一致。
- enhancer在学习applymiddleware时一起说明。
看一下createstore 源码中的关键部分:
// 记录reducer函数、初始状态、监听函数 let currentreducer = reducer let currentstate = preloadedstate let currentlisteners = [] // 创建store时,触发一个空的action,这样如果没有初始状态,就会返回reducer中的默认状态 dispatch({ type: actiontypes.init }) // 返回一个提供了多种方法的对象 return { dispatch, //触发action的方法 subscribe, //增加监听方法 getstate, //获取当前状态的方法 replacereducer, //更换reducer方法 [$$observable]: observable }
这里是用了闭包,在createstore的作用域中创建了currentstate
变量来记录状态,currentreducer
来记录reducer函数,currentlisteners
来记录所有的监听函数。然后返回一个对象,对象中的方法可以获取currentstate、触发reducer来更新currentstate,添加监听函数,替换reducer等。
这个对象就是 store , 而state,reducer,listeners保存在createstore的作用域中,只有通过store中的方法可以访问到。
getstate()
只有store.getstate()
能获取到仓库的state --> currentstate变量
function getstate() { if (isdispatching) { //··· } return currentstate }
dispatch()
只有store.dispatch(action)
可以触发更新state。注意在redux中action必须是一个纯对象,而且必须有type字段指定动作类型,dispatch中有对与这些的校验。
function dispatch(action) { /*-- action必须是对象 --*/ if (!isplainobject(action)) { //··· } /*-- action必须有type字段--*/ if (typeof action.type === 'undefined') { //··· } if (isdispatching) { //··· } /*-- 触发reducer,更新state --*/ try { isdispatching = true currentstate = currentreducer(currentstate, action) } finally { isdispatching = false } /*-- 执行监听函数 --*/ const listeners = (currentlisteners = nextlisteners) for (let i = 0; i < listeners.length; i++) { const listener = listeners[i] listener() } return action }
从这一段currentstate = currentreducer(currentstate, action)
看出currentstate是通过执行reducer函数更新的。
而且也知道了reducer函数的参数情况:
- 当前状态
- action对象,且有type字段
如果想在state变化时做点什么,就需要用到subscribe
方法添加监听函数
subscribe(listener)
只看关键代码,其实就是维护了一个保存监听函数的数组。从上面dispatch的代码listener()
可以看出,这些函数会在dispatch(action)
的时候触发。
而且每次新增listener的时候都会返回一个取消监听的方法unsubscribe
,可以在适当的时候取消监听。
function subscribe(listener) { /*-- 增加监听 --*/ nextlisteners.push(listener) /*-- 返回一个取消监听的函数 --*/ return function unsubscribe() { const index = nextlisteners.indexof(listener) nextlisteners.splice(index, 1) } }
replacereducer(nextreducer)
可以更改reducer函数,很简单,重新赋值。
function replacereducer(nextreducer) { if (typeof nextreducer !== 'function') { //··· } // 更新reducer函数 currentreducer = nextreducer dispatch({ type: actiontypes.replace }) }
实例
上面对createstore的实现有了大致的了解,再看看栗子
action中需要type
字段来标记要执行的字段,会定义为字符串常量;一般会使用单独的模块来管理。
/*-- 动作类型 actiontypes.js --*/ export const add_todo = 'add_list'; export const complete_todo = 'complete_todo';
action 必须是一个纯javascript对象。可以通过创建action的函数返回,这样就方便传递数据。
/*-- action对象 action.js --*/ import { add_todo, complete_todo} from "./actiontypes"; export function addlist (text) { // 返回action对象 return { type: add_todo, text } } export function completelist (id,bl = true) { return { type: complete_todo, id, bl } }
reducer 是一个纯函数,接受旧的state和action,返回新的state。只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 api 请求、没有变量修改,单纯执行计算。
/*-- reducer函数 todolist.js --*/ import {add_todo, complete_todo} from '../actiontypes'; let id = 0; export default function todolist(state = [],action) { // 根据type区分如何更新state switch (action.type) { case add_todo : // 不要直接修改state,要返回一个新的state return [...state,{ id: id++, text: action.text, complete:false }] case complete_todo : return state.map( item => { if (item.id === action.id){ return object.assign({},item,{complete:action.bl}) } return item; }) default: return state; } }
使用 createstore 创建 store
/*-- 创建store --*/ import {createstore} from 'redux'; import reducer from './reducer/todolist'; let store = createstore(reducer);
更新 state
import {addlist,completelist} from './store/actions'; store.dispatch(addlist('测试数据'));
addlist('测试数据')
返回的是 action {type: add_todo,text:'测试数据'}
。
在todolist函数中,执行完后返回新的state [{id:0,text:'测试数据',complete:false}]
。
获取 state
console.log(store.getstate()); // [{id:0,text:'测试数据',complete:false}]
添加/删除 监听函数
// 添加 unsubscribe = store.subscribe(function(){ // 每次更新state都会执行此函数 console.log(store.getstate()); }); // 取消 unsubscribe()
上一篇: 和同事打麻将
下一篇: CSS3实现银灰色动画效果的导航菜单代码