redux入门 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

Store

本小节将了解什么是store

1、什么是store

store是用来维持应用所有state的的一个对象,也可以说是一个方法的集合

2、创建store

store不是类,要创建store只需要将根reducer(上一节中通过combineReducers将子reducer处理后返回的函数)作为参数传递给createStore函数。

var store = createStore(todoApp);

3.store的方法

A、getState: 获取到当前的state

B、dispatch: 他就是我们反复强调的唯一的能改变state的那个函数。

C、subscribe: 添加一个变化监听器,当dispatch action时他就会执行,我们可以在回调函数中使用getState函数,查看当前的state,在上一小节中我们还能看到,subscribe函数会返回一个解除监听的函数

D、replaceReducer: 替换当前用来计算的reducer

4、使用Store

由于暂时不涉及界面,我们只能测试程序的更新逻辑。

var store = createStore(todoApp);

var unsubscribe = store.subscribe(()=>{
  console.log(store.getState());
});

console.log('添加吃饭');
store.dispatch(addTodo('吃饭'));
console.log('添加睡觉');
store.dispatch(addTodo('睡觉'));
console.log('完成吃饭');
store.dispatch(completeTodo(0));
console.log('添加打豆豆');
store.dispatch(addTodo('打豆豆'));
console.log('完成睡觉');
store.dispatch(completeTodo(1));
console.log('setFilter');
store.dispatch(selectFilter(FILTER.SHOW_COMPLETE));
unsubscribe();
在右方代码去创建Store,你可以打开控制台查看