Action Creator

Veröffentlicht am

上一章节我们讲了Action，讲了Store和State，我们了解到一个页面应用只能有一个Store，也了解了Redux中，一个State对应一个View，只要是State相同View就相同，知道State就知道View。还有如果想要改变State就要使用Action，只有通过Action他才能吧数据运送到Store中去。

Action Creator

View要发送多少种消息就会有多少种Action，我们会定义一个Action来储存Action的行为，这个函数就叫做Action Creator。

1
2
3
4
5
6
7
8
9
10
const ADD_TODO = '添加Todo'
 function addTodo(text){
  return {
   type: ADD_TODO,
   text
  }
 }
 const action = addTodo('Learn Redux')

函数addTodo就是一个Action Creator

Store.dispatch

store.dispatch()是view发出Action的唯一方法。

1
2
3
4
5
6
7
import { createStore } from 'redux'
 const store = createStore(fn)
 store.dispatch({
  type:'ADD_TODO',
  payload: 'Learn Redux'
  })

上面代码中，store.dispatch()接受一个Action对象作为参数，将它发送出去结合Action Creator，可以改写为：

1
store.dispatch(addTodo('Redux'))

Reducer

Store收到Action，必须给出一个新的State，这样View才会发生变化，这种State的计算过程叫做Reducer，Reducer是一个函数，他接受Action和当前State作为参数，返回一个新的State。

1
2
3
const reducer = function(state,action){
	return new_state
}

整个应用的初始状态可以作为State的默认值。

1
2
3
4
5
6
7
8
9
10
11
12
13
const defaultState = 0;//设定默认值
const reducer = (state=defaultState,action) => {
	switch(action,type){
	 case:'ADD';
	 	return state + action.payload
	 default:
	 	return state
	}
}
const state = reducer(1,{
	type:'ADD',
	payload:2
})

上面的代码中，redecer函数收到名为ADD的Action以后，就返回新的State，作为加法的计算结果，其他运算的逻辑（比如减法），也根据Action的不同来实现。

实际应用中Reducer函数不用像上面这样手动调节Store.dispatch()方法会触发Reducer的自动执行，为此，Store需要知道Reducer函数做法就是在生成Store的时候将Reducer传入createStore方法。