使用Redxu管理数据

技术分享

redux中数据流

其中核心模块式action、store、reducer，一般情况下先写reducer的逻辑，相当于MVC中的控制器controller，实现对数据的操作、修改，但凡涉及到数据的改变，都需要reducer介入。

reducer实际上是一个普通函数，有两个参数state、action，state表示之前仓库中的状态(数据)，action表示要做什么的对象

reducer接收state和action

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * reducer 本质上是一个普通函数
 * @param {*} state 之前仓库中的状态(数据)
 * @param {Object} action 要做什么，约定格式为 {type:"操作类型", payload:附加数据}
 */
function reducer(state, action) {
	//  返回一个新的状态
	if (action.type === 'increase') {
		return state + 1;
	} else if (action.type === 'decrease') {
		return state - 1;
	} else {
		// 如果是一个无效的操作类型，数据不变
		return state;
	}
}

reducer一般由自己编写逻辑，store可以通过Redux中的createStore()方法创建

1
2
3
4
5
6
const store = createStore(reducer, state);
const action = { type: 'increase' };
//通过store中的dispatch分发action
store.dispatch(action);
//通过store中的getState()拿到最新的数据
store.getState()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 完整代码：src/redux/index.js
import { createStore } from 'redux';
/**
 * reducer 本质上是一个普通函数
 * @param {*} state 之前仓库中的状态(数据)
 * @param {Object} action 要做什么，约定格式为 {type:"操作类型", payload:附加数据}
 */
function reducer(state, action) {
	//  返回一个新的状态
	if (action.type === 'increase') {
		return state + 1;
	} else if (action.type === 'decrease') {
		return state - 1;
	} else {
		// 如果是一个无效的操作类型，数据不变
		return state;
	}
}
// 初始值为10
const store = createStore(reducer, 10);
const action = { type: 'increase' };
console.log('old store:', store.getState()); // 得到仓库中当前的数据
// 向仓库分发action
store.dispatch(action);
console.log('new store:', store.getState()); // 得到仓库中当前的数据