文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

手写React-Redux核心原理,再也不怕面试官问我React-Redux原理

2024-12-03 18:10

关注

下面,就写一下我自己对 redux 和 React-redux 的学习以及使用的心得,权当是对学习过程的一种记录和分享。

一、redux和React-redux的几个重要概念
1.1 action
Action 是把数据从应用(这里之所以不叫 view 是因为这些数据有可能是服务器响应,用户输入或其它非 view 的数据 )传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

1.2 reducer
Reducers 指定了应用状态的变化如何响应 actions并发送到 store 的,记住 actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state。

1.3 store
store就是把action和reducer联系到一起的对象,store本质上是一个状态树,保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。

在 Redux 中,所有的数据(比如state)被保存在一个store容器中 ,在一个应用程序中只能有一个store对象。当一个store接收到一个action,它将把这个action代理给相关的reducer。reducer是一个纯函数,它可以查看之前的状态,执行一个action并且返回一个新的状态。

1.4 Provider
Provider 其实就只是一个外层容器,它的作用就是通过配合 connect 来达到跨层级传递数据。使用时只需将Provider定义为整个项目最外层的组件,并设置好store。那么整个项目都可以直接获取这个store。它的原理其实是通过React中的[Context]()来实现的。它大致的核心代码如下:

  1. import React, {Component} from 'react' 
  2. import {PropTypes} from 'prop-types' 
  3.  
  4. export default class Provider extends Component { 
  5.     getChildContext() { 
  6.         return {store: this.props.store} 
  7.     } 
  8.  
  9.     constructor() { 
  10.         super() 
  11.  
  12.         this.state = {} 
  13.     } 
  14.  
  15.     render() { 
  16.         return this.props.children 
  17.     } 
  18.  
  19. Provider.childContextTypes = { 
  20.     store: PropTypes.object 

1.5 connect
connect 的作用是连接React组件与 Redux store,它包在我们的容器组件的外一层,它接收上面 Provider 提供的 store 里面的 state 和 dispatch,传给一个构造函数,返回一个对象,以属性形式传给我们的容器组件。

它共有四个参数mapStateToProps, mapDispatchToProps, mergeProps以及options。

mapStateToProps 的作用是将store里的state(数据源)绑定到指定组件的props中 mapDispatchToProps 的作用是将store里的action(操作数据的方法)绑定到指定组件的props中 另外两个方法一般情况下使用不到,这里就不做介绍。。

那么 connect 是怎么将React组件与 Redux store连接起来的呢?其主要逻辑可以总结成以下代码:

  1. import {Component} from "react"
  2. import React from "react"
  3. import {PropTypes} from 'prop-types' 
  4.  
  5. const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent => { 
  6.     class Connect extends Component { 
  7.         constructor() { 
  8.             super() 
  9.  
  10.             this.state = {} 
  11.  
  12.         } 
  13.  
  14.         componentWillMount() { 
  15.             this.unSubscribe = this.context.store.subscribe(() => { 
  16.                 this.setState(mapStateToProps(this.context.store.getState())) 
  17.             }) 
  18.         } 
  19.  
  20.         componentWillUnmount() { 
  21.             this.unSubscribe() 
  22.         } 
  23.  
  24.         render() { 
  25.             return 
  26.                                       {...mapDispatchToProps(this.context.store.dispatch)}/> 
  27.         } 
  28.     } 
  29.  
  30.     Connect.contextTypes = { 
  31.         store: PropTypes.object 
  32.     } 
  33.     return Connect 
  34. }) 
  35.  
  36. export default connect 

二、redux和React-redux的使用
项目中关于redux的文件夹目录如下

拿管理用户信息数据的需求来举例

第一步,编写操作用户信息的action

  1. import {USER_INFO} from "../constants/actionTypes"
  2. import store from '../store/store' 
  3.  
  4. export const switchUser = (data) => { 
  5.     console.log("switchUser()",data); 
  6.     return () => { 
  7.         store.dispatch({ 
  8.             type: USER_INFO, 
  9.             ...data 
  10.         }) 
  11.     } 

第二步,编写改变用户信息并返回新state的reducer

  1. import {USER_INFO} from "../constants/actionTypes"
  2.  
  3. const redUserInfo = (state = { 
  4.     userId: 10001, 
  5.     userName: ''
  6.     userOpenid: ''
  7.     userPhone: ''
  8.     userRole: 0 
  9. }, action) => { 
  10.     if (action === undefined) { 
  11.         return state 
  12.     } 
  13.  
  14.     switch (action.type) { 
  15.         case USER_INFO: 
  16.             return { 
  17.                 ...state, 
  18.                 ...action 
  19.             } 
  20.         default
  21.             return state 
  22.     } 
  23.  

第三步,完成store的创建

  1. import {createStore} from 'redux' 
  2. import reducers from '../reducers/index' 
  3.  
  4. let store = createStore(reducers) 
  5.  
  6. export default store 

第四步,获取用户信息

  1. //配置代码,通过connect将组件和store连接起来 
  2. let mapStateToProps = (state) => ({ 
  3.     userInfo: {...state.redUserInfo} 
  4. }) 
  5.  
  6. let mapDispatchToProps = (dispatch) => ({}) 
  7.  
  8. export default connect(mapStateToProps, mapDispatchToProps)(PageClass) 
  9.  
  10. //通过props获取用户信息 
  11. this.props.userInfo 

第五步,修改用户信息

  1. import {switchUser} from '../../redux/actions/userInfo' 
  2.  
  3. switchUser({ 
  4.     userId: 10001, 
  5.     userName: ''
  6.     userOpenid: ''
  7.     userPhone: ''
  8.     userRole: 2 
  9. })(); 

至此就完成了redux+React-redux的一个简单使用流程

 

来源:前端阳光内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯