react笔记（十四）—— redux代码执行过程携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章react笔记（十三）—— redux介绍中，我们学习了redux基本介绍、redux 开发环境准备、Redux 三个核心概念（action/reducer/store）等相关知识点。在本篇文章中，我们将学习到纯函数、Redux核心概念store、Redux 获取默认值的执行过程、Redux 代码执行过程等相关知识点。

Redux核心概念-纯函数

纯函数是函数式编程中的概念，对于纯函数来说，相同的输入总是得到相同的输出。纯函数原则：1. 不得改写参数；2. 不能调用 Date.now()或者 Math.random()等不纯的方法，因为每次会得到不一样的结果；3. 不能使用全局变量。reducer 必须是一个纯函数。纯函数主要的含义就是它不可以修改影响输入值。没有副作用，副作用指的是例如函数中一些异步调用或者会影响函数作用域之外的变量一类的操作。

Redux核心概念-store

store是仓库的意思，是Redux 的核心，整合 action 和 reducer。

// store: 整个数据的仓库，复杂关联reducer和action
// store可以给reducer分配action
import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

store的特点是：

一个应用只有一个 store。
维护应用的状态，获取状态：store.getState()。
创建 store 时接收 reducer 作为参数：const store = createStore(reducer)
发起状态更新时，需要分发 action：store.dispatch(action)
订阅(监听)状态变化：const unSubscribe = store.subscribe(() => {})
取消订阅状态变化： unSubscribe()

import { createStore } from 'redux'

// 创建 store
const store = createStore(reducer)

// 更新状态
// dispatch 派遣，派出。表示：分发一个 action，也就是发起状态更新
store.dispatch(action)

// ---
// 其他 API

// 监听状态变化
const unSubscribe = store.subscribe(() => {
  // 状态改变时，执行相应操作
})

// 取消监听状态变化
unSubscribe()

Redux 获取默认值的执行过程

只要创建 store，那么，Redux 就会调用一次 reducer。这一次调用 reducer 的目的：获取状态的默认值。

Redux 内部第一次调用 reducer： reducer(undefined, {type: "@@redux/INITv.a.4.t.t.p"})。因为传入的状态值是 undefined ，并且是一个随机的 action type，所以状态值因为 undefined，所以，我们设置的默认值就会生效，比如，此处的：10。因为是一个随机的 action type，所以，reducer 中 switch 一定无法处理该 action，那就一定会走 default。也就是直接返回了状态的默认值，也就是：10。Redux 内部拿到状态值（比如，此处的 10）以后，就用这个状态值，来作为了 store 中状态的最新值。因此，将来当我们调用 store.getState() 方法来获取 Redux 状态值的时候，拿到的就是 10 了。

// 1 导入 createStore
import { createStore } from 'redux'
// 2 创建 store
const store = createStore(reducer)

// action => { type: 'increment' }
function reducer(state = 10, action) {
  console.log('reducer:', state, action)
  switch (action.type) {
    case 'increment':
      return state + 1
    default:
      return state
  }
}

console.log('store 状态值为：', store.getState())

Redux 代码执行过程

创建 store 时，Redux 就会先调用一次 reducer，来获取到默认状态。
当你需要更新状态时，就先分发动作 store.dispatch(action)。
Redux 内部，store 就会调用 reducer，传入：上一次的状态（当前示例中就是：10）和 action（{ type: 'increment' }），计算出新的状态，并返回。
reducer 执行完毕后，将最新的状态交给 store，store 用最新的状态替换旧状态，状态更新完毕。

import { createStore } from 'redux'
const store = createStore(reducer)

function reducer(state = 10, action) {
  console.log('reducer:', state, action)
  switch (action.type) {
    case 'increment':
      return state + 1
    default:
      return state
  }
}

console.log('状态值为：', store.getState()) // 10

// 发起更新状态：
// 参数： action 对象
store.dispatch({ type: 'increment' })
// 相当于： reducer(10, { type: 'increment' })

console.log('更新后：', store.getState()) // 11