深入认识Redux(二)
注1:本文主要根据 "自述|redux中文文档" 学习的个人总结记录。也是是为了更快更好的学习和接受redux的操作,更好的应用的项目中。原文档地址:http://www.redux.org.cn/ 这篇文章主要介绍Redux中三个主要概念Action,Reducer,State。 1. ActionAction是我们事先定义好的一些对象,表示触发某个事件的标识。它必须有一个key为type字段,type的值类型为字符串,通常会单独建立一个文件存放所有的actionType,该文件定义的都是type的值.如下: 文件名:actionType.js export const FIRST_ACTION = 'FIRST_ACTION' export const MIDDLE_ACTION = 'MIDDLE_ACTION' ... Action除了有个必须的type字段,我们还可以根据需要自定义一些其他的字段,这些字段承载着传入到store中,可以说是store中数据的唯一来源。 如下: const DEMO_ACTION = 'DEMO_ACTION' //这里就不单独的建一个文件存actionType const action = { type: DEMO_ACTION,payload : '这里是可以传入到store中的数据' } store.dispatch(action) //通过store.dispatch将action传入到store 注意我们不会单独的为每次state的改变而去定义一个action,通常我们会声明一个action创建函数. 什么是action创建函数?其实就是生成action的方法,在redux中action创建函数只是简单的返回一个action: function add() { return { type: 'ADD_WHAT',payload: {} } } store 里能直接通过 store.dispatch() 调用 dispatch() 方法,但是多数情况下你会使用 react-redux 提供的 connect() 帮助器来调用。bindActionCreators() 可以自动把多个 action 创建函数 绑定到 dispatch() 方法上。关于bindActionCreators这个方法我们后面会介绍到。 2.Reducer刚才我们介绍的action是用来描述发生某个特定的事情去触发state的改变,那么reducer就是定义如何去操作我们state的规则。 reducer是一个纯函数,它接受两个参数,第一个是旧的state,第二个是action对象,运行后返回一个state。 export function thisIsReducer(state={},action) { switch(action.type) { case 'XXXX': //... return Object.assign({},action.store) break case 'YYYY': //... return Object.assign({},action.store) break default: return state } } 注意一下:我们不要去修改state,所以看到上面是通过Object.assign新建了一个副本.还有不管怎么样都要返回一个state。
//主题列表reducer export function themeListStore(state={},actions) { switch (actions.type) { case ActionsType.THEME_LIST: state = Object.assign({},state,actions.store); state.datas.map((item,index)=>{ state.datas[index].isChecked = false; item.photoList.map((e,i)=>{ item.photoList[i].isChecked = 0; item.photoList[i].rotateAngle = item.photoList[i].userRotate; }) }); return state; case ActionsType.THEME_SORT: if( actions.dir == 'up' && actions.curId == 0 ) { return state }else if( actions.dir == 'down' && actions.curId == state.datas.length-1 ){ return state }else { if( actions.dir == 'up' ){ state.starId = state.datas[actions.curId].themeId state.endId = state.datas[actions.curId-1].themeId return state }else if( actions.dir == 'down' ){ state.starId = state.datas[actions.curId].themeId state.endId = state.datas[actions.curId+1].themeId return state } } default: return state } } //切换照片批量移动和主题编辑增加reducer export function changeOptStore(state=0,actions) { switch (actions.type) { case ActionsType.CHANGE_OPT: if(actions.option == 0){ state = 0 return state }else if(actions.option == 1){ state = 1 return state }else if(actions.option == 2){ state = 2 return state } console.log(state,'state') default: return state } } 上面的代码就是刚利用React-redux管理数据时写的reducer(有些不严谨的地方请忽略)。 之前我们说过整个应用中只存在唯一的store,那么分散在不同文件中的reducer我们要如何整合在一起呢? import {combineReducers} from 'redux'; import * as commonReducers from './commonReducers'; import * as alertMsgReducer from './alertMsgReducer'; import * as uploadPhotoReducer from './uploadPhotoReducer'; import * as photoGraphyReducer from './photoGraphyReducer'; const rootReducer = combineReducers({ ...commonReducers,...alertMsgReducer,...uploadPhotoReducer,...photoGraphyReducer }); export default rootReducer; 如上,我们通过import引入不同文件中所有的reducer,然后通过combineReducers进行整合一个根reduce人、,然后export出去。那么整合过后的是什么东西呢?我们打印出来看下:
3.Store上面我们了解了action是预先定义好即将发生什么事件,reducer是定义对应事件处理数据的规则。那么store就是把他们联系到一起的对象:
如何去创建一个store? import {createStore} from 'redux' import rootReducerfrom './rootReducer' let store = createStore(rootReducer) createStore还有第二个参数,用来设置state的初始状态,那么这样对于同构应用可以进行服务端渲染(文档原话:这对开发同构应用时非常有用,服务器端 redux 应用的 state 结构可以与客户端保持一致,那么客户端可以将从网络接收到的服务端 state 直接用于本地数据初始化。) let store = createStore(todoApp,window.STATE_FROM_SERVER) 4.数据流Redux中是严格的单项数据流。Redux中的从改变到渲染到页面中主要有四个步骤:
总结这里简单归纳一下:action是我们根据需要定义好一些action对象,我们通过store.dispatch(action)会触发队一行的reducer函数,reducer根据规则改变state,最后改变后的数据会呈现在我们的视图上。后面我们会继续介绍react中使用react-redux,以及异步action的操作等.. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- ios – Swift:print()命令不能在Xcode 7.3.1中打印到控制台
- c – 构造函数Foo :: Foo接收对Foo的引用但不接受copy-cons
- c – 为什么自动说明符的类型推导仅关注for-loop的init字段
- Oracle PL/SQL游标
- react-redux使用入门
- flex4:中DataGroup组件获取数据源(ArrayCollection方式)实例
- Flex很难?一文就足够了
- Flash 与课件制作:简单的加法
- Split a string, but keep the the regexp (分割字符串,保
- iPhone:没有名称或路径为’iphoneos3.0’的SDK
- c – std :: vector和LLVM :: SmallVector有什么
- Cocos2d-x3.2与OpenGL渲染总结(一)Cocos2d-x3.2的
- Flex 动态创建 多个曲线图/柱形图 ColumnSeries
- reactjs – 使用TypeScript将事件处理程序作为pr
- ruby-on-rails – 动作邮件程序SMTP谷歌应用程序
- ruby-on-rails – 回形针接受生产的jpg和png
- c# – 如何使用HTML Agility Pack编辑HTML代码段
- vscode 搭建react-native 详解
- sqlite3_step()
- 使用安装和部署以及Installer类卸载用c#编写的应