iis服务器助手广告广告
返回顶部
首页 > 资讯 > 数据库 >React-Redux的核心原理是什么
  • 436
分享到

React-Redux的核心原理是什么

2024-04-02 19:04:59 436人浏览 八月长安
摘要

这篇文章主要介绍“React-Redux的核心原理是什么”,在日常操作中,相信很多人在React-Redux的核心原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Re

这篇文章主要介绍“React-Redux的核心原理是什么”,在日常操作中,相信很多人在React-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]()来实现的。它大致的核心代码如下:

import React, {Component} from 'react' import {PropTypes} from 'prop-types'  export default class Provider extends Component {     getChildContext() {         return {store: this.props.store}     }      constructor() {         super()          this.state = {}     }      render() {         return this.props.children     } }  Provider.childContextTypes = {     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连接起来的呢?其主要逻辑可以总结成以下代码:

import {Component} from "react"; import React from "react"; import {PropTypes} from 'prop-types'  const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent => {     class Connect extends Component {         constructor() {             super()              this.state = {}          }          componentWillMount() {             this.unSubscribe = this.context.store.subscribe(() => {                 this.setState(mapStateToProps(this.context.store.getState()))             })         }          componentWillUnmount() {             this.unSubscribe()         }          render() {             return <WrappedComponent  {...this.state}                                       {...mapDispatchToProps(this.context.store.dispatch)}/>         }     }      Connect.contextTypes = {         store: PropTypes.object     }     return Connect })  export default connect

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

React-Redux的核心原理是什么

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

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

import {USER_INFO} from "../constants/actionTypes"; import store from '../store/store'  export const switchUser = (data) => {     console.log("switchUser()",data);     return () => {         store.dispatch({             type: USER_INFO,             ...data         })     } }

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

import {USER_INFO} from "../constants/actionTypes";  const redUserInfo = (state = {     userId: 10001,     userName: '',     userOpenid: '',     userPhone: '',     userRole: 0 }, action) => {     if (action === undefined) {         return state     }      switch (action.type) {         case USER_INFO:             return {                 ...state,                 ...action             }         default:             return state     }  }

第三步,完成store的创建

import {createStore} from 'redux' import reducers from '../reducers/index'  let store = createStore(reducers)  export default store

第四步,获取用户信息

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

第五步,修改用户信息

import {switchUser} from '../../redux/actions/userInfo'  switchUser({     userId: 10001,     userName: '',     userOpenid: '',     userPhone: '',     userRole: 2 })();

到此,关于“React-Redux的核心原理是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

您可能感兴趣的文档:

--结束END--

本文标题: React-Redux的核心原理是什么

本文链接: https://www.lsjlt.com/news/61992.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • React-Redux的核心原理是什么
    这篇文章主要介绍“React-Redux的核心原理是什么”,在日常操作中,相信很多人在React-Redux的核心原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Re...
    99+
    2024-04-02
  • React中Redux核心原理深入分析
    目录一、Redux是什么二、Redux的核心思想三、Redux中间件原理四、手写一个Redux总结一、Redux是什么 众所周知,Redux最早运用于React框架中,是一个全局状态...
    99+
    2022-11-16
    React使用Redux React Redux用法
  • Zookeeper的核心原理是什么
    这篇文章主要介绍“Zookeeper的核心原理是什么”,在日常操作中,相信很多人在Zookeeper的核心原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Zookee...
    99+
    2024-04-02
  • Vue的核心原理是什么
    这篇文章主要介绍“Vue的核心原理是什么”,在日常操作中,相信很多人在Vue的核心原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue的核心原理是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-06-29
  • ReentrantLock核心原理是什么
    本篇内容介绍了“ReentrantLock核心原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!&n...
    99+
    2024-04-02
  • Axios核心原理是什么
    这篇文章主要介绍“Axios核心原理是什么”,在日常操作中,相信很多人在Axios核心原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Axios核心原理是什么”的疑惑...
    99+
    2024-04-02
  • ReactHook核心原理是什么
    本篇内容主要讲解“ReactHook核心原理是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ReactHook核心原理是什么”吧!基本准备工作手写useSt...
    99+
    2024-04-02
  • React的核心原理和用法
    本篇内容介绍了“React的核心原理和用法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 1. ...
    99+
    2024-04-02
  • React Flux与Redux设计及使用原理是什么
    本篇内容主要讲解“React Flux与Redux设计及使用原理是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React Flux与Redux设计及使用原理是什么”吧!...
    99+
    2023-07-05
  • React的三大核心属性是什么
    今天小编给大家分享一下React的三大核心属性是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1、State 属性Rea...
    99+
    2023-06-29
  • Flutter核心原则是什么
    这篇文章主要介绍“Flutter核心原则是什么”,在日常操作中,相信很多人在Flutter核心原则是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Flutter核心原则是什么”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-04
  • OAM Kubernetes 实现核心原理是什么
    OAM Kubernetes 实现核心原理是什么,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。OAM 因何而生我们知道,应用容器技术自诞生开始,就以 “彻底改变...
    99+
    2023-06-04
  • 深入理解React Native核心原理(React Native的桥接(Bridge)
    在这篇文章之前我们假设你已经了解了React Native的基础知识,我们会重点关注当native和JavaScript进行信息交流时的内部运行原理。 主线程 在开始之前,我们需要知...
    99+
    2024-04-02
  • react-redux的作用是什么
    这篇文章主要介绍了react-redux的作用是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react-redux的作用是什么文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • Java synchronized偏向锁的核心原理是什么
    本篇内容主要讲解“Java synchronized偏向锁的核心原理是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Java synchronized偏向锁的核心原理是什...
    99+
    2023-06-29
  • Spring Cloud原理及核心组件是什么
    本篇内容介绍了“Spring Cloud原理及核心组件是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!概述毫无疑问,Sprin...
    99+
    2023-07-05
  • ZooKeeper核心原理及应用场景是什么
    这篇文章将为大家详细讲解有关ZooKeeper核心原理及应用场景是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。为什么会有ZooKeeper 我们知道要写一个分布式应用是非常困...
    99+
    2023-06-02
  • Java中synchronized轻量级锁的核心原理是什么
    这篇文章将为大家详细讲解有关Java中synchronized轻量级锁的核心原理是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 轻量级锁的原理引入轻量级锁的主要目的是在多线程竞争不激烈的情况下,...
    99+
    2023-06-29
  • .NET WebSocket核心原理是怎样的
    .NET WebSocket核心原理是怎样的,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。我们先深入研究基本概念,以了解Web...
    99+
    2024-04-02
  • React框架核心原理全面深入解析
    目录前言第一章 基本概念第二章 createElement 函数第三章 render函数第四章 Concurrent Mode第五章 Fibers第六章 Render and Com...
    99+
    2022-11-16
    React框架的原理 React框架核心
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作