redux 学习笔记(一)createStore

265 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

简介

这个系列的文章是 redux 学习笔记,会从用法和源码分析的角度介绍 redux 的 api,不是最新的版本,但是代码的分析应该会让读者有一些收获~

系列文章

redux 学习笔记(一)createStore

redux 学习笔记(二)combineReducer

redux 的几个点

  • Redux 可以控制数据流动,和 React,Angular,Vue 等框架配合,清晰的管理数据流。
  • Redux 由三部分组成:store,action,reducer
  • 数据流动的例子:onClick -> dispatch 一个 action -> 根据 action type 执行 reducer -> 更新 store,更新 store 后并没有引起 view 层变化,真正引起变化不是 redux 做的。

createStore(reducer, initialState)

createStore 作用为创建一个 store,参数(总的 reducer,初始的状态树)
返回了 4 个方法挂在了 store 上

dispatch

主要有两个作用:

  1. 执行相应的 reducer
currentState = currentReducer(currentState, action)

因为 store 只有一个,所以这里 currentState 为整个 store tree。
相应的 currentReducer 为根 reducer。

  1. 执行 subscribe 里注册的方法
var listeners = currentListeners = nextListeners
for (var i = 0; i < listeners.length; i++) {
  listeners[i]()
}

在执行 subscribe 方法时,默认将 listen 函数放到了一个数组里,这里遍历这个数组,分别执行这些方法。

getState

作用:返回整个 state 树。

subscribe

function subscribe(listener) {
  nextListeners.push(listener);
}

作用:注册监听事件,返回 unsubscribe。

replaceReducer

作用:替换 reducer,重新初始化 store 结构。

createStore 里注册完这些函数后执行了 dispatch({ type: ActionTypes.INIT }) 初始化了 store tree,将每一个 store 分支下的 state 赋成初始值

以上是 createStore 相关的内容,欢迎点赞和评论~