【共享单车】—— 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. ...
随机推荐
- 大型C++项目必须注意的几个小问题
大型C++项目必须注意的几个小问题 有些问题对于小型的C++项目来说可能无关紧要,但对于大中型C++项目来讲,这些问题却成了大问题.什么样的项目算是小型项目呢,什么样的算是大中型项目呢,我认为10万L ...
- 怎么查看linux系统是32位还是64位
1.#uname -a如果有x86_64就是64位的,没有就是32位的 这是64位的 # uname -a Linux desktop 2.6.35-23-generic #20-Ubuntu SMP ...
- java equals 与 hashCode
转:http://m.blog.csdn.net/blog/pengchua/2297547# 如果你为某个类写了equals方法,那么应该同时编写hashCode方法.如果没有提供hashcode方 ...
- Windows.Forms Panel 动态加载用户控件 UserControl
创建好一个Windows Forms程序,在创建好的程序中Form1添加一个Panel控件 如图:
- 洛谷 P1463 [SDOI2005]反素数ant && codevs2912反素数
题目描述 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例如,整数1,2,4,6 ...
- JS将JSON日期转换为指定格式的日期
1.引入JS日期转换的函数库 function Format(now,mask) { var d = now; var zeroize = function (value, length) { if ...
- [HDU_3652]B-number
题目描述 A wqb-number, or B-number for short, is a non-negative integer whose decimal form contains the ...
- 掌握 Linux 调试技术【转】
转自:https://www.ibm.com/developerworks/cn/linux/sdk/l-debug/index.html 您可以用各种方法来监控运行着的用户空间程序:可以为其运行调试 ...
- do_exit——>exit_notify()【转】
转自:http://blog.csdn.net/sunnybeike/article/details/6907322 版权声明:本文为博主原创文章,未经博主允许不得转载. /* * Send sign ...
- android上USB Wifi调试记录
https://wenku.baidu.com/view/cc3098c72f60ddccdb38a043.html?from=search