从一个简单例子了解action、store、reducer
来源:互联网 发布:软件著作权收费标准 编辑:程序博客网 时间:2024/05/30 05:40
转自 程序猿小卡_casper in segmentFault
其实,redux的核心概念就是store、action、reducer,从调用关系来看如下所示
store.dispatch(action) --> reducer(state, action) --> final state
可以先看下面的极简例子有个感性的认识,下面会对三者的关系进行简单介绍
// reducer方法, 传入的参数有两个// state: 当前的state// action: 当前触发的行为, {type: 'xx'}// 返回值: 新的statevar reducer = function(state, action){ switch (action.type) { case 'add_todo': return state.concat(action.text); default: return state; }};// 创建store, 传入两个参数// 参数1: reducer 用来修改state// 参数2(可选): [], 默认的state值,如果不传, 则为undefinedvar store = redux.createStore(reducer, []);// 通过 store.getState() 可以获取当前store的状态(state)// 默认的值是 createStore 传入的第二个参数console.log('state is: ' + store.getState()); // state is:// 通过 store.dispatch(action) 来达到修改 state 的目的// 注意: 在redux里,唯一能够修改state的方法,就是通过 store.dispatch(action)store.dispatch({type: 'add_todo', text: '读书'});// 打印出修改后的stateconsole.log('state is: ' + store.getState()); // state is: 读书store.dispatch({type: 'add_todo', text: '写作'});console.log('state is: ' + store.getState()); // state is: 读书,写作store、reducer、action关联
可以结合上面的代码来看下面几段解释
store:对flux有了解的同学应该有所了解,store在这里代表的是数据模型,内部维护了一个state变量,用例描述应用的状态。store有两个核心方法,分别是getState、dispatch。前者用来获取store的状态(state),后者用来修改store的状态。
// 创建store, 传入两个参数// 参数1: reducer 用来修改state// 参数2(可选): [], 默认的state值,如果不传, 则为undefinedvar store = redux.createStore(reducer, []);// 通过 store.getState() 可以获取当前store的状态(state)// 默认的值是 createStore 传入的第二个参数console.log('state is: ' + store.getState()); // state is:// 通过 store.dispatch(action) 来达到修改 state 的目的// 注意: 在redux里,唯一能够修改state的方法,就是通过 store.dispatch(action)store.dispatch({type: 'add_todo', text: '读书'});
action:对行为(如用户行为)的抽象,在redux里是一个普通的js对象。redux对action的约定比较弱,除了一点,action必须有一个type字段来标识这个行为的类型。所以,下面的都是合法的action
{type:'add_todo', text:'读书'}{type:'add_todo', text:'写作'}{type:'add_todo', text:'睡觉', time:'晚上'}
reducer:一个普通的函数,用来修改store的状态。传入两个参数 state、action。其中,state为当前的状态(可通过store.getState()获得),而action为当前触发的行为(通过store.dispatch(action)调用触发)。reducer(state, action) 返回的值,就是store最新的state值。
// reducer方法, 传入的参数有两个// state: 当前的state// action: 当前触发的行为, {type: 'xx'}// 返回值: 新的statevar reducer = function(state, action){ switch (action.type) { case 'add_todo': return state.concat(action.text); default: return state; }};
关于actionCreator
看到xxCreator总能让人联想到工厂模式,没错,在redux里,actionCreator其实就是action的工厂方法,可以参考下面例子。
actionCreator(args) => actionvar addTodo = function(text){ return { type: 'add_todo', text: text };};addTodo('睡觉'); // 返回:{type: 'add_todo', text: '睡觉'}
在redux里,actionCreator并非是必需的。不过建议用actionCreator代替普通action对象的直接传递。除了能够减少代码量,还可以大大提高代码的可维护性。想象下面的场景再来看回文章开头的例子,应用actionCreator后的代码示例。
store.dispatch(addTodo('睡觉'));console.log('state is: ' + store.getState()); // state is: 读书,写作,睡
- 从一个简单例子了解action、store、reducer
- 从一个简单例子了解action、store、reducer
- Redux系列01:从一个简单例子了解action、store、reducer
- 【redux】Action Reducer Store
- Action Reducer Store
- 认识redux的store,reducer,action
- 一个例子了解apacheBench的简单使用方法
- 一个简单了解spring的例子
- Matlab:一个简单例子了解ndgrid函数
- Redux系列01+核心概念 工作流程 安装 Action和Action创建函数 Reducer Store 数据流
- 从几个简单例子了解CUDA内核的几个…
- 一个简单例子让你了解C++命名空间
- 一个简单例子了解使用互斥量线程同步
- 一个简单的例子带你了解jni流程
- 一个简单的例子让你了解React-Redux
- 用Maven构建项目&写一个简单的Mapper-Reducer
- 从一个简单的实例来了解PE文件
- 从一个很简单的程序了解运算符优先级
- 浅谈~云计算
- 数据库中存储过程、函数、触发器的区别
- redis和memcached 对比
- 移动端下拉刷新、上拉加载更多 Zepto/jQuery插件
- shell里的` ` $( ) ${ } expr $(( ))
- 从一个简单例子了解action、store、reducer
- Xshell安装rz/sz命令
- 工作笔记:box-shadow 的用法
- iOS 联系客服
- ASP.NET Core实战之权限管理系统
- SAP ABAP入门学习-基本语法
- CCF火车购票
- tomcat 使用第三方机构ca证书
- 对Java 对象 序列化 与 反序列化的 解读