Redux的基本元素组成
- Action
本质上就是普通的JavaScript对象。我们约定,action内使用一个字符串类型的type字段来表示将要执行的动作。例如:
{type: 'INCREMENT'} 和 {type: 'DECREMENT'} 都是action。 - Reducer
Reducer是形式为(state, action) => state的纯函数,描述了action如何把state转变成下一个state。例如:
function counter (state=0, action) {
switch (action.type){
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
} - Store
Store是一个全局的对象,将action和reducer以及state联系到一起。Store有以下职能: - 维持应用的state
- 提供getState()方法获取state
- 提供dispatch(action)方法更新state
- 通过subscribe(listener)注册监听器
创建一个store
//创建store需要从redux包中导入createStore这个方法
import { createStore } from 'redux';
//使用reducer纯函数counter作为第一个参数创建store
let store = createStore(counter);
//第二个参数为state的初始值
let store = createStore(counter, 100);
- 发起action
store.dispatch({ type: 'INCREMENT'});
store.dispatch({ type: 'DECREMENT'});
当发起action后,就将action传进了store中,使用reducer函数(这里是counter)更新state值.