6-Store

Time: 20200129

在本文，我们将actions和reducers联系到一起来，二者实际上是独立的，一个是数据结构，一个是纯函数。

将二者联系在一起的就是：store。

Redux Store

One store for the entire application.

主要负责：

• 保存应用状态
• 允许访问状态，通过函数getState()
• 允许状态更新，通过dispatch(action)
• 通过subscribe(listener)来注册监听器
• 通过subscribe(listener)返回的函数来处理监听器的注销

截屏2020-01-29下午2.58.32.png

本文的学习目标就是在实际代码中看看这些是如何执行的。

联系到蛋糕店这个场景，store就是店的含义，而状态则是由货架这种对象来表征。电员是reducers，顾客的要求是actions。

// import redux from 'redux'

const redux = require('redux')  // nodejs version import
// this is a function
const createStore = redux.createStore // not redux.createStore()

// console.log("From index.js")
const BUY_CAKE = 'BUY_CAKE'

// action creator
function buyCake(params) {
    action = {
        type: BUY_CAKE,
        info: 'first redux action',
    }
    return action
}

// (previousState, action) => newState
const initialState = {
    numOfCakes: 10,
}
// 定义一个reducer，这里已经把初始状态放到reducer中了
const reducer = (state=initialState, action) => {
    switch (action.type) {
        case BUY_CAKE:
            return {
                ...state,
                numOfCakes: state.numOfCakes - 1
            }
        default:
            return state
    }
}

// create a store
const store = createStore(reducer)
console.log('initial state: ', store.getState())
const unsubscribe = store.subscribe(() => console.log('Updated state', store.getState()))

store.dispatch(buyCake())
store.dispatch(buyCake())
store.dispatch(buyCake())

// 注销监听事件
unsubscribe()

注意，我们现在学的是单纯的redux的用法，还未进入react-redux。

执行代码：node index.js，结果如下：

initial state:  { numOfCakes: 10 }
Updated state { numOfCakes: 9 }
Updated state { numOfCakes: 8 }

每一次store更新的时候，都会触发监听器执行日志记录。

且注意，创建store时，只是把reducer作为参数传入，而初始态是在reducer定义时作为参数传入。

仔细看这个关系。

这段代码虽然短，但是已经完全表达了redux这个库的使用以及设计思想。

dispatch是store的功能函数，分发行为后，就会触发store的更新。

store的更新被监听，然后我们在监听函数中添加必要的逻辑，用于响应变化。

很喜欢这个设计，简洁又明确。

注册监听器时又返回必要的句柄，用于注销。

想得非常周到，且自然。

这里我们把action creator和reducers都放在一起了，为了代码更好的组织，我们需要将动作单独抽出来放到一个文件中，便于管理。

理解redux是理解react-redux的必要前提。

END.