Redux示例1-概念

认识几个概念

1.Store

Store保存数据的地方，可以看作一个容器。

Redux提供createStore来生成store。

// 定义一个store，存储数据

var store = Redux.createStore(counter)

counter为定义的一个function。

2.State

Store包含所有的数据，可以通过store.getState()拿到

var state = store.getState()

3.Action

Action就是View发出的通知，表示State应该要发生变化了。

// 定义action

var actions = [

{ type: 'INCREMENT' },

{ type: 'DECREMENT' }

]

提及下Action Creator

其实就是通过函数的方式来定义一个Action，通过return一个对象出来。

4.store.dispatch()

// 增加事件

document.getElementById('increment')

.addEventListener('click', function(){

// 分发action

store.dispatch(actions[0])

})

// 减少事件

document.getElementById('decrement')

.addEventListener('click', function(){

// 分发action

store.dispatch(actions[1])

});

5.store.subscribe()

// 订阅状态变化

store.subscribe(render)

6.Reducer

是一个纯函数，就是计算state的数据

const reducer=function(state,action){// ...returnnew_state;};

示例中的代码为:

// 定义一个函数Reducer，实现增加和减少

function counter(state, action) {

if(typeof state === "undefined") {

return 0

}

// 当定义的action的type

switch (action.type) {

case 'INCREMENT':

return state + 1

case 'DECREMENT':

return state - 1

default:

return state

}

}