前言:以下内容基于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. 大型C++项目必须注意的几个小问题

    大型C++项目必须注意的几个小问题 有些问题对于小型的C++项目来说可能无关紧要,但对于大中型C++项目来讲,这些问题却成了大问题.什么样的项目算是小型项目呢,什么样的算是大中型项目呢,我认为10万L ...

  2. 怎么查看linux系统是32位还是64位

    1.#uname -a如果有x86_64就是64位的,没有就是32位的 这是64位的 # uname -a Linux desktop 2.6.35-23-generic #20-Ubuntu SMP ...

  3. java equals 与 hashCode

    转:http://m.blog.csdn.net/blog/pengchua/2297547# 如果你为某个类写了equals方法,那么应该同时编写hashCode方法.如果没有提供hashcode方 ...

  4. Windows.Forms Panel 动态加载用户控件 UserControl

    创建好一个Windows Forms程序,在创建好的程序中Form1添加一个Panel控件 如图:

  5. 洛谷 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 ...

  6. JS将JSON日期转换为指定格式的日期

    1.引入JS日期转换的函数库 function Format(now,mask) { var d = now; var zeroize = function (value, length) { if ...

  7. [HDU_3652]B-number

    题目描述 A wqb-number, or B-number for short, is a non-negative integer whose decimal form contains the ...

  8. 掌握 Linux 调试技术【转】

    转自:https://www.ibm.com/developerworks/cn/linux/sdk/l-debug/index.html 您可以用各种方法来监控运行着的用户空间程序:可以为其运行调试 ...

  9. do_exit——>exit_notify()【转】

    转自:http://blog.csdn.net/sunnybeike/article/details/6907322 版权声明:本文为博主原创文章,未经博主允许不得转载. /* * Send sign ...

  10. android上USB Wifi调试记录

    https://wenku.baidu.com/view/cc3098c72f60ddccdb38a043.html?from=search