前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star。


一、Redux基础介绍

  • 单向数据流:从父组件留向子组件,兄弟组件无法共享数据
  • Redux核心概念
  1. State:React中的状态,是只读对象,不可直接修改
  2. Reducer:基本函数,用于对State的业务处理
  3. Action:普通对象,用于描述事件行为,改变State
  • Redux工作流

  • Redux安装

    yarn add redux --save
    
    yarn add react-redux --save
    
  • Redux集成

  1. 创建Action模块

  2. 创建Reducer模块

  3. 创建Store模块

  4. 通过connect方法将React组件和Redux连接起来

  5. 添加<Provider />作为项目的根组件,用于数据的存储

  • Redux调试工具安装

  1. 在火狐中安装Redux Devtools扩展:【安装地址

  2. 项目中安装redux-devtools-extension调试插件

    yarn add redux-devtools-extension --save
    
  • Redux适用场景

  1. 项目需求角度考虑:

    • 用户的使用方式复杂
    • 不同身份的用户有不同的使用方式(比如普通用户和管理员)
    • 多个用户之间可以协作
    • 与服务器大量交互,或者使用了WebSocket
    • View要从多个来源获取数据
  2. 组件角度考虑:
    • 某个组件的状态,需要共享
    • 某个状态需要在任何地方都可以拿到
    • 一个组件需要改变全局状态
    • 一个组件需要改变另一个组件的状态
  3. 不适用的场景:
    • 用户的使用方式非常简单
    • 用户之间没有协作
    • 不需要与服务器大量交互,也没有使用 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)
  1. 通过connect方法将react组件与Redux连接

    export default connect()(NavLeft)  
  2. 获取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)
  1. 通过connect方法将react组件与Redux连接
  2. 利用mapStateToProps函数建立state与store的映射关系:将state.menuName 绑定到 props 的menuName
  3. 面包屑标题处:获取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

  • mapStateToProps(state, ownProps)为一个函数,它可以传入两个参数,结果一定要返回一个 object;
  • 传入mapStateToProps之后,会订阅store的状态改变,在每次 store 的 state 发生变化的时候,都会被调用;
  • ownProps代表组件本身的props,如果写了第二个参数ownProps,那么当prop发生变化的时候,mapStateToProps也会被调用;
  • mapStateToProps可以不传,如果不传,组件不会监听store的变化,也就是说Store的更新不会引起UI的更新

——参考博客


注:项目来自慕课网

【共享单车】—— React后台管理系统开发手记:Redux集成开发的更多相关文章

  1. 【共享单车】—— React后台管理系统开发手记:主页面架构设计

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  2. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  3. react后台管理系统路由方案及react-router原理解析

        最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式   ...

  4. HoloLens开发手记-配置开发环境 Install the tools

    随着Build 2016开发者大会的结束,HoloLens开发包也正式开放下载.Hololens没有独立的SDK,开发特性被集成到最新的Visual Studio Update 2中.如果你没有Hol ...

  5. 【Python开发】python集成开发环境IDE搭建

    http://blog.csdn.net/pipisorry/article/details/39854707 使用的系统及软件 Ubuntu / windows Python 2.7 / pytho ...

  6. 【共享单车】—— React后台管理系统开发手记:城市管理和订单管理

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  7. 【共享单车】—— React后台管理系统开发手记:AntD Form基础组件

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  8. 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  9. 【共享单车】—— React后台管理系统开发手记:权限设置和菜单调整(未完)

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

随机推荐

  1. Chromium源码获取与编译

    http://blog.csdn.net/glunoy/article/details/23591047 http://blog.sina.com.cn/s/blog_48f93b530101ergp ...

  2. web项目报outmemory错误解决方案

    因为数据问题内存不够出现错误,将参数加入到eclipse的run的配置文件中:

  3. 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 ...

  4. 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. 我萌 ...

  5. xen save/restore 过程

    以下分析基于 xen4.2.3, 虚拟机都是hvm模式 使用libxl库有两种方式启动一个虚拟机,一种是 xl create xx.conf , 这种方式从一个配置文件开始启动一个虚拟机,速度相对较慢 ...

  6. 谈谈dpdk应用层包处理程序的多进程和多线程模型选择时的若干考虑

    看到知乎上有个关于linux多进程.多线程的讨论:http://www.zhihu.com/question/19903801/answer/14842584 自己项目里也对这个问题有过很多探讨和测试 ...

  7. 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 ...

  8. Juce-强大的开源类库

    介绍 Juce是一个完全围绕C++语言的类库,用来开发跨平台的应用程序. 完整的用doxgen生成的html形式的API手册可以在这里下到.或者可以从下载页面下载预编译的windows帮助文件. 想获 ...

  9. Python之jieba分词

    jieba,很有意思的一个模块,专门用来分词. import jieba # sentence:分割的中文字符串 # cut_all:是否采用全模式,默认为False表示精确模式 # HMM:表示是否 ...

  10. Win32环境下代码注入与API钩子的实现(转)

    本文详细的介绍了在Visual Studio(以下简称VS)下实现API钩子的编程方法,阅读本文需要基础:有操作系统的基本知识(进程管理,内存管理),会在VS下编写和调试Win32应用程序和动态链接库 ...