【共享单车】—— React后台管理系统开发手记:Redux集成开发
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star。
一、Redux基础介绍
- 单向数据流:从父组件留向子组件,兄弟组件无法共享数据
- Redux核心概念
- State:React中的状态,是只读对象,不可直接修改
- Reducer:基本函数,用于对State的业务处理
- Action:普通对象,用于描述事件行为,改变State
- Redux工作流
Redux安装
yarn add redux --save yarn add react-redux --save
Redux集成
创建Action模块
创建Reducer模块
创建Store模块
通过connect方法将React组件和Redux连接起来
添加<Provider />作为项目的根组件,用于数据的存储
Redux调试工具安装
在火狐中安装Redux Devtools扩展:【安装地址】
项目中安装redux-devtools-extension调试插件
yarn add redux-devtools-extension --save
Redux适用场景
项目需求角度考虑:
- 用户的使用方式复杂
- 不同身份的用户有不同的使用方式(比如普通用户和管理员)
- 多个用户之间可以协作
- 与服务器大量交互,或者使用了WebSocket
- View要从多个来源获取数据
- 组件角度考虑:
- 某个组件的状态,需要共享
- 某个状态需要在任何地方都可以拿到
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态
- 不适用的场景:
- 用户的使用方式非常简单
- 用户之间没有协作
- 不需要与服务器大量交互,也没有使用 WebSocket
- 视图层(View)只从单一来源获取数据
二、Redux集成
- src->redux目录下:创建action->index.js操作事件模块
/**
* Action 类型:用户事件操作
*/ export const type = {
SWITCH_MENU : 'SWITCH_MENU'
} // 菜单点击切换,修改面包屑名称
export function switchMenu(menuName) {
return {
type:type.SWITCH_MENU,
menuName
}
} - src->redux目录下:创建reducer->index.js数据处理模块
/**
* Reducer: 数据处理
*/
import {type} from './../action' const initialState = {
menuName: '首页'
} const ebikeData = (state = initialState, action) => {
switch (action.type) {
case type.SWITCH_MENU:
return {
...state, //旧值
menuName: action.menuName //新值
}
break;
default:
return {
...state
};
}
}
export default ebikeData; - src->redux目录下:创建store->configureStore.js数据源模块
/**
* 引入createStore保存数据源
*/ import {createStore} from 'redux'
import reducer from './../reducer'
//调试工具插件方法 -- redux降级到3.7可使用
// import { composeWithDevTools } from 'redux-devtools-extension' export default () => createStore(reducer) src->index.js项目入口文件中:添加<Provider />项目根组件,存储store数据源
import { Provider } from 'react-redux'
import configureStore from './redux/store/configureStore' const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<Router />
</Provider>,
document.getElementById('root'));
三、面包屑标题切换
- pages->components->NevLeft(index.js)中:菜单(Menu)点击切换改变store中的面包屑名称(MenuName)
- 通过connect方法将react组件与Redux连接
export default connect()(NavLeft)
- 获取this.props.dispatch方法派发事件:通过action事件自动调用reducer存入到store中
import {connect} from 'react-redux' //连接器
import { switchMenu } from './../../redux/action' //事件行为 class NavLeft extends React.Component {
state = {
currentKey: ''
}
handleClick = ({item, key}) => {
if (key === this.state.currentKey) {
return false;
}
// 事件派发,自动调用reducer,通过reducer保存到store对象中
const { dispatch } = this.props;
dispatch(switchMenu(item.props.title))
// console.log(item)
this.setState({
currentKey: key
})
}
homeHandleClick = () => {
const { dispatch } = this.props;
dispatch(switchMenu('首页'));
this.setState({
currentKey: ""
});
}; //其它代码
<Menu
onClick={this.handleClick}
selectedKeys={[this.state.currentKey]}
theme="dark"
>
{this.state.MenuTreeNode}
</Menu> }
- pages->components->Header(index.js)中:获取并填入store中的面包屑名称(MenuName)
- 通过connect方法将react组件与Redux连接
- 利用mapStateToProps函数建立state与store的映射关系:将state.menuName 绑定到 props 的menuName
- 面包屑标题处:获取this.props.menuName填入
import {connect} from 'react-redux' //连接器
…… //将state.menuName 绑定到 props 的menuName
const mapStateToProps = state => {
return {
menuName: state.menuName
}
}
export default connect(mapStateToProps)(Header)
关于mapStateToProps
——参考博客 |
注:项目来自慕课网
【共享单车】—— React后台管理系统开发手记:Redux集成开发的更多相关文章
- 【共享单车】—— React后台管理系统开发手记:主页面架构设计
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
- react后台管理系统路由方案及react-router原理解析
最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式 ...
- HoloLens开发手记-配置开发环境 Install the tools
随着Build 2016开发者大会的结束,HoloLens开发包也正式开放下载.Hololens没有独立的SDK,开发特性被集成到最新的Visual Studio Update 2中.如果你没有Hol ...
- 【Python开发】python集成开发环境IDE搭建
http://blog.csdn.net/pipisorry/article/details/39854707 使用的系统及软件 Ubuntu / windows Python 2.7 / pytho ...
- 【共享单车】—— React后台管理系统开发手记:城市管理和订单管理
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记:AntD Form基础组件
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记:权限设置和菜单调整(未完)
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
随机推荐
- Chromium源码获取与编译
http://blog.csdn.net/glunoy/article/details/23591047 http://blog.sina.com.cn/s/blog_48f93b530101ergp ...
- web项目报outmemory错误解决方案
因为数据问题内存不够出现错误,将参数加入到eclipse的run的配置文件中:
- hdu 4388 Stone Game II sg函数 博弈
Stone Game II comes. It needs two players to play this game. There are some piles of stones on the d ...
- College student reflects on getting started in open source(二)
My budding interest grew into a full-time obsession: creating artwork on my clunky, laggy laptop. 我萌 ...
- xen save/restore 过程
以下分析基于 xen4.2.3, 虚拟机都是hvm模式 使用libxl库有两种方式启动一个虚拟机,一种是 xl create xx.conf , 这种方式从一个配置文件开始启动一个虚拟机,速度相对较慢 ...
- 谈谈dpdk应用层包处理程序的多进程和多线程模型选择时的若干考虑
看到知乎上有个关于linux多进程.多线程的讨论:http://www.zhihu.com/question/19903801/answer/14842584 自己项目里也对这个问题有过很多探讨和测试 ...
- com.android.build.api.transform.TransformException: java.util.zip.ZipException: duplicate entry: android/support/annotation/ColorRes.class
保存信息如上: 我在添加一个支持库的时候遇的问题,这个库com.yanzhenjie:album:1.0.5 这是由于v4包重复导致的,在网上我也找过多种解决方案 用了这种,方式 configur ...
- Juce-强大的开源类库
介绍 Juce是一个完全围绕C++语言的类库,用来开发跨平台的应用程序. 完整的用doxgen生成的html形式的API手册可以在这里下到.或者可以从下载页面下载预编译的windows帮助文件. 想获 ...
- Python之jieba分词
jieba,很有意思的一个模块,专门用来分词. import jieba # sentence:分割的中文字符串 # cut_all:是否采用全模式,默认为False表示精确模式 # HMM:表示是否 ...
- Win32环境下代码注入与API钩子的实现(转)
本文详细的介绍了在Visual Studio(以下简称VS)下实现API钩子的编程方法,阅读本文需要基础:有操作系统的基本知识(进程管理,内存管理),会在VS下编写和调试Win32应用程序和动态链接库 ...