【redux】Action Reducer Store
2016-07-27 13:11
453 查看
action 创建函数
action 用来表示有事情发生action创建函数就是生成action的方法,redux的action创建函数只是简单的返回一个action
function addTodo(text) { return { type: ADD_TODO, text } }
redux中只要把action创建函数的结果传递给dispatch()就可以发起一次dispatch
reducer
reducer 当action发生时,用来改变state数据reducer是纯函数,不能修改传入的参数,不能执行有副作用的操作,如api操作和路由跳转,不用调用非纯函数如Date.now()
reducer 根据action的情况和原来的state,输出新的state
function todoApp(state = initialState, action) { switch (action.type) { case SET_VISIBILITY_FILTER: return Object.assign({}, state, { visibilityFilter: action.filter }) default: return state } }
state的初始值是undefined redux首次执行时应该为其赋值initialState
在遇到未知的action时返回原state
Object.assign(),不能把state放在第一个参数上,这样会改变state的值,用一个空对象,用state的数据填充进去,再用对应action的操作修改 返回一个新的对象
store
getState()
获取当前state他与store最后一个reducer的返回值相同
dispatch(action)
分发action,这是出发state改变的唯一方式会使用当前
getState()的结果和传入的
action以同步方式的调用 store 的 reduce 函数。返回值会被作为下一个 state。从现在开始,这就成为了
getState()的返回值,同时变化监听器(change listener)会被触发
createStore(reducer, [initialState])
创建一个store来存放应用中所有的state应用中应该有且仅有一个store
参数
reducer 接受两个参数 state 和 action初始state
返回值
(Store):保存了所有的state,唯一改变的方法是dispatch(action),也可以设置一个subscribe(listener)import { createStore } from 'redux' function todos(state = [], action) { switch (action.type) { case 'ADD_TODO': return state.concat([ action.text ]) default: return state } } let store = createStore(todos, [ 'Use Redux' ]) store.dispatch({ type: 'ADD_TODO', text: 'Read the docs' }) console.log(store.getState()) // [ 'Use Redux', 'Read the docs' ]
subscribe(listener)
添加一个变化监听器,每当 dispatch(action)的时候就会执行,state中的一部分可能已经变化,可以在回调函数中调用getState()来拿到当前statefunction select(state) { return state.some.deep.property } let currentValue function handleChange() { let previousValue = currentValue currentValue = select(store.getState()) if (previousValue !== currentValue) { console.log('Some deep nested property changed from', previousValue, 'to', currentValue) } } let unsubscribe = store.subscribe(handleChange) handleChange()
replaceReducer(nextReducer)
替换原有的reducer相关文章推荐
- 报错:1130-host ... is not allowed to connect to this MySql server 开放mysql远程连接 不使用localhost
- Oracle 11G在用EXP 导出时,空表不能导出解决
- vs中添加界面皮肤
- Linux命令(19)用户权限管理:chown
- 通过Python使用树莓派的GPIO[未完待续...]
- iOS UIWebView 的加载
- Drawable、Bitmap、byte[]之间的转换
- iOS - 大文件下载(task and session)
- windows 任务计划失败 返回值
- 服务器架构及实战(架构篇)- PHP建站
- caffe 试运行MNIST
- Android TextView 不同主题下两边对齐
- Maven常用
- 关于OleDB连接Excel的Extended Properties(扩展属性)HDR=YES; IMEX=2个人理解心得
- 读懂 Linux中的 diff
- React学习笔记
- 汽车网站源码下载
- 算法竞赛入门经典(第二版)-刘汝佳-第三章 数组与字符串 环状序列
- Python--列表解析
- C/C++内存泄漏及检测