使用React-Redux提供程序的有效DOM嵌套
React-Redux是一个用于构建可扩展、可维护的前端应用程序的JavaScript库。它结合了React和Redux两个流行的库，提供了一种有效的方式来管理应用程序的状态和数据流。
React是一个用于构建用户界面的JavaScript库，它采用组件化的开发模式，使得开发人员可以将界面拆分为独立的可重用组件。React使用虚拟DOM（Virtual DOM）来高效地更新和渲染界面，只更新需要改变的部分，提高了应用程序的性能。
Redux是一个用于管理应用程序状态的JavaScript库。它采用单一的状态树（Single State Tree）模式，将应用程序的状态存储在一个全局的JavaScript对象中。Redux使用纯函数（Pure Functions）来处理状态的变化，通过派发（Dispatch）动作（Actions）来触发状态的更新，保证了状态的可预测性和可维护性。
React-Redux将React和Redux结合起来，提供了一个提供程序（Provider）组件，用于将Redux的状态树注入到React组件中。通过使用React-Redux，开发人员可以轻松地将Redux的状态和数据流集成到React应用程序中。
有效的DOM嵌套是指在React-Redux应用程序中，使用React组件嵌套的方式来构建DOM结构。React组件可以嵌套在其他React组件中，形成一个层次结构，这样可以更好地组织和管理应用程序的界面。
使用React-Redux提供程序的有效DOM嵌套的优势包括：
- 组件化开发：React的组件化开发模式使得应用程序的界面可以被拆分为独立的可重用组件，提高了代码的可维护性和可复用性。
- 状态管理：Redux提供了一种统一的方式来管理应用程序的状态，通过单一的状态树和纯函数的方式来处理状态的变化，使得状态的管理更加可预测和可维护。
- 性能优化：React使用虚拟DOM来高效地更新和渲染界面，只更新需要改变的部分，减少了DOM操作的次数，提高了应用程序的性能。
- 数据流控制：通过Redux的数据流控制机制，可以更好地管理应用程序中的数据流动，确保数据的一致性和可靠性。
- 开发效率：React-Redux提供了一些辅助工具和中间件，可以简化开发过程，提高开发效率。
React-Redux的应用场景包括但不限于：
- 大型应用程序：对于大型的前端应用程序，使用React-Redux可以更好地组织和管理代码，提高开发效率和代码的可维护性。
- 实时数据应用：对于需要实时更新数据的应用程序，使用React-Redux可以方便地管理数据的流动和更新，保证数据的一致性。
- 多平台应用：React-Redux可以用于构建多平台的应用程序，包括Web、移动端和桌面端应用。
腾讯云提供了一些与React-Redux相关的产品和服务，包括：
- 云服务器（CVM）：提供了可扩展的云服务器实例，用于部署和运行React-Redux应用程序。
- 云数据库MySQL版（CDB）：提供了高性能、可扩展的云数据库服务，用于存储React-Redux应用程序的数据。
- 云存储（COS）：提供了可靠、安全的云存储服务，用于存储React-Redux应用程序的静态资源和文件。
- 云网络（VPC）：提供了灵活的云网络服务，用于搭建和管理React-Redux应用程序的网络环境。
- 人工智能服务（AI）：提供了各类人工智能服务，如语音识别、图像识别等，可以与React-Redux应用程序集成，实现更多的功能和交互方式。
更多关于腾讯云产品和服务的详细介绍，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
3回答
Jest和酶有什么区别？
、、、、
我刚开始做单元测试。我想测试React项目。我从React文档开始，它将酶称为测试工具，这对我来说有点模糊。
Jest和enzyme有什么区别？
enzyme断言库还是任务运行程序？
我能用karma和Jasmine吗？
测试react-redux项目的最佳方法是什么？
浏览 9提问于2017-03-06得票数 47
6回答
我得到了以下错误：
node_modules/@types/react-redux/index.d.ts(8,24): error TS2307: Cannot find module 'redux'.
尽管同时安装了react-redux和redux (package.json)：
"dependencies": {
"react": "15.4.2",
"react-native": "0.42.3",
"react-redux": "^5.0.3
浏览 4提问于2017-03-24得票数 34
回答已采纳
我是redux的初学者，我特别想知道，如果你想在你的react原生应用程序中使用redux，它是否很重要，你必须用provider包装你的app.js文件，或者你可以用每个组件包装它。据我所知，provider任务实际上将我们的应用程序状态与redux库连接起来。
从“react-redux”导入{Provider}；
浏览 0提问于2020-05-16得票数 0
我目前正在尝试使用function路由器v4将我的导航条与v4()函数分离开来。但是，如何使用新的react路由器v4和链接组件将导航条移动到单独的文件？
我的应用程序client.js的起点
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Link} from 'react-router-dom'
浏览 0提问于2017-04-13得票数 1
回答已采纳
我想让一个react/redux/离子型应用程序正常工作。
当我运行npm install时，会得到错误：
>`enter code here`npm install
npm WARN @ionic/react@0.0.5 requires a peer of react-router@^4.3.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/react@0.0.5 requires a peer of react-router-dom@^4.3.1 but non
浏览 0提问于2019-08-12得票数 0
回答已采纳
我正在写一个react-redux应用程序。一开始，它调用单个端点，该端点以大量嵌套的JSON的形式返回大量数据。然后我将其规范化，并将其放入我的redux-orm模式中。
在我看来，在后端创建嵌套数据只是为了对前端的嵌套数据进行循环，以便对其进行规范化，这似乎很愚蠢，因为它来自标准化的PostgreSQL数据库。
Database = Normalized -->
API = Denormalized -->
Frontend = Normalized
仅仅发回标准化的API响应是最佳实践吗？
浏览 0提问于2017-01-11得票数 13
import React, { Component } from 'react'
import { createStore } from 'redux'
import { Provider, connect, useSelector } from 'react-redux'
function rootReducer(state = { name: 'store' }, action) {
return state
}
const store = createStore(rootReducer)
function
浏览 3提问于2021-08-26得票数 0
初学者问题，我看到了这个amazing react-redux tutorial，注意到它没有使用ReactDOM.render react-redux能处理这个问题吗？
浏览 15提问于2020-08-26得票数 1
回答已采纳
编译失败。
/moonholdings.io/node_modules/@types/react-dom/node_modules/@types/react/index.d.ts (2312,14)：重复标识符“LibraryManagedAttributes”。
不知道我为什么要得到这个。
我已经把我的"@types/node"从10级降到了8级，但那没有效果。也尝试过"@types/node": "^9.6.7"
我的回购：
我的package.json
{
"name": "moonholdings.io
浏览 0提问于2018-09-13得票数 5
回答已采纳
我正在使用Redux编写一个应用程序，根本无法获得Redux connect()ed组件来呈现。
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
var store = createStore((s, a) => s, {hello: "WORLD"});
class App extends React.Component {
render() { return <h1> Hello, world!
浏览 5提问于2015-09-23得票数 2
回答已采纳
这是我的index.js代码
import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import "@fortawesome/fo
浏览 4提问于2021-11-27得票数 0
今天，我第一次尝试在react上实现Redux --应用程序，因为管理状态/道具很混乱，到目前为止在redux方面还不错，但是当我尝试将我的商店与我的应用程序+路由器连接时，我会遇到错误。
根据我放置路由器标记的方式，有两样东西附加在上面：
-not编译(大部分时间是因为我在路由器之外)
-compiling，呈现，但当我试图导航url更改，而不是应该呈现的组件。
我做了很多尝试(很多次)，所以我回到了刚才连接商店的时候。
下面是我的index.js：
import React from 'react';
import ReactDOM from 'reac
浏览 0提问于2019-03-31得票数 2
回答已采纳
1回答
我已经设置了redux的一个反应本地应用程序，我已经工作了几天。我不断得到不变的错误，无法在上下文或道具中找到存储。我在谷歌上搜索了几天，尝试了多种不同的解决方案，但我似乎无法修复这个错误。
商店：
`import React from 'react';
import { render } from 'react-dom'
import { Provider } from 'react-redux';
import { createStore,applyMiddleware } from 'redux';
import thunk
浏览 0提问于2018-04-29得票数 0
回答已采纳
我在上遵循了react路由器-redux示例，但是当我尝试将{this.props.children}传递给IndexRoute并尝试记录它时，它是未定义的。
我通过控制台得到的唯一错误是Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored，通过搜索这个错误，它只是人们所说的那些错误之一，因为它不影响任何代码(出于某种原因)。
package.json
....
"re
浏览 1提问于2017-03-30得票数 7
回答已采纳
我遵循了这个伟大的，它是带有三个选项卡的tabs，使用redux。一切都很好。现在，我试图在中嵌套这个Tab栏，但是我有以下错误：
我对Redux很陌生，真的找不到问题出在哪里。这是我的代码：
StackNav.js
import React from 'react';
import { connect } from 'react-redux';
import { addNavigationHelpers } from 'react-navigation';
import { RootNav } from './../navi
浏览 3提问于2017-04-27得票数 2
回答已采纳
1回答
我正在构建一个使用react-router v4的react应用程序。我像这样正确地定义了我的路由器。
<Router>
<Provider store={store}>
<Switch>
{/* Login Route */}
<Route exact path="/" component={LoginForm} />
<Route exact path="/?redirect=
浏览 2提问于2018-03-13得票数 0
1回答
我正在尝试在我的react应用程序中实现Redux存储。我使用Auth0进行身份验证和授权。我需要将UserID和权限等数据存储到我的存储中。目前我的index.js文件如下： // src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Auth0Provider
浏览 18提问于2020-02-02得票数 0
我是react的新手，我想私下展示一下我的管理仪表板，但是仅仅是第一线的工作和其他路由的组件没有显示出来。这是我的密码：
<Routes>
<Route path="/admin" element={<PrivateLayout />}>
<Route path="/dashboard" exact element={<Dashboard />} />
</Route>
<Route exact path='/' e
浏览 3提问于2022-04-13得票数 2
回答已采纳
对不起，这个标题很糟糕(真的不知道我还能给出什么标题)。
长话短说，作为第一次反应组件库开发人员.我正在使用webpack 4将我的传输到一个模块中。
一切都进行得很顺利，直到我开始使用来加速本地开发速度。
因此，主要的问题是，尽管我已经指定如下
//webpack.fancy-react-component-lib.config.js
...
externals: {
react: {
root: 'React',
commonjs2: 'react',
commonjs: &
浏览 2提问于2019-06-25得票数 1
1回答
我正在尝试与反应路由器v4工作。我有一个应用程序，我有两个页面:登录页面和应用程序页面。在我的应用程序页面中，我有三个部分:标题、侧边栏和内容部分。这就是我想要的
登陆页应该是登录页
一旦用户点击登录按钮，用户应该登陆到App。(对于测试，我还没有包括用户身份验证)
现在，在我的应用程序页面中，我可以根据用户单击侧栏的内容显示其中的一个组件(我已经做了)。因此边栏和标题应该始终是可见的，内容划分应该根据用户单击侧栏的内容来更改它的组件。
我现在就是这样安排我的路线的
class Root extends Component {
render() {
浏览 0提问于2018-01-24得票数 0
我正在使用react-router-dom Link组件来管理我的导航，但它不起作用。Link会更改URL，但不会呈现组件。这是一个简单的应用程序来描述我的问题。我正在尝试使用我的应用程序标题作为go home链接： import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import React from 'react';
const Navigation = () => {
return (
<div&g
浏览 16提问于2021-04-27得票数 0
回答已采纳
我用Typescript安装了React项目： npx create-react-app my-app --template typescript 在我使用npm run start运行应用程序之后 我得到了这个错误： TypeScript error in C:/Users/neman/Desktop/projects/redux-saga-ts-boilerplate/src/index.tsx(2,22):
Could not find a declaration file for module 'react-dom'. 'C:/Users/neman/Desk
浏览 408提问于2020-04-28得票数 2
我对React生态系统很陌生，通过尝试简单的应用程序来学习。在这种情况下，我将尝试路由如何在react应用程序中工作。基本上，我们的想法是：
点击链接(一个反应路由器组件)导航到一个新页面。
成功完成分派的异步操作后，导航到新页面。
这是我的密码
import React from 'react'
import {Link} from 'react-router'
import {routerActions} from 'react-router-redux'
import {connect} from 'react-re
浏览 4提问于2016-06-01得票数 9
在redux-store中放置许多项是否存在性能问题？例如，商店是这样的：
{
user:{...},
userDetail:{},
shoppingCart:{},
OrderDetail:{},
...
}
它的键数几乎是50个项目。
我在我的项目中使用react-redux来存储任何数据(甚至是应用程序的一个部分中使用的、不共享的数据)。
浏览 0提问于2019-07-01得票数 0
回答已采纳
1回答
我有一个关于注销函数实现的问题。 正如你可能在codesandbox中看到的，我的应用程序已经变成了这个样子：https://sit9d.csb.app/login 下面是我想可能要编辑的Logout.js代码： import React, { Component } from 'react'
import { connect } from 'react-redux'
import { setAuthedUser } from '../actions/authedUser'
class Logout extends Component {
浏览 19提问于2020-01-23得票数 0
回答已采纳
2回答
你好，我正在构建一个项目，在那里我使用了reactjs、redux和react路由器-dom。
由于一些奇怪的原因，当我导航到http://localhost:3000时，我会得到以下错误：Warning: You tried to redirect to the same route you're currently on: "/signin"
我尝试过许多类似的问题，但没有运气。也许Switch不起作用？或者我需要一双新的眼睛因为这可能很明显..。
贝娄是我的源代码：
router.jsx
import React from 'react';
imp
浏览 0提问于2018-10-06得票数 0
1回答
我已经看过许多redux的示例代码，并发现我们使用useSelector的方式主要有两种。
nested
import React from 'react'
import { useSelector } from 'react-redux'
export const UserComponent = () => {
const name = useSelector((state) => state.user.name)
const age = useSelector((state) =>
浏览 0提问于2021-06-02得票数 1
2回答
我正在使用Selenium框架进行测试自动化，最近应用程序使用Shadow进行了升级。我们已经尝试使用javascript执行器querySelector实现自动化。应用程序在一个页面中有超过20个影子根，并且大多数影子根都是上一个根的子根。因此，要识别一个元素，我们需要遍历多个根，就像在document.querySelector('root1').shadowRoot.querySelector('root2')....like中那样，直到第n根才能找到一个元素。
WebElement DropDown = (WebElement) js.executeSc
浏览 2提问于2021-02-26得票数 1
回答已采纳
在我的react应用程序中，来自'react-redux'的'react-redux'函数是undefined，即使版本是最新的，并且VS代码中没有错误(我甚至可以ctrl-单击并查看键入和node_modules文件夹中的代码)。这体现在以下几个方面：
1)以下错误[HMR] bundle has 1 warnings: export 'useSelector' was not found in 'react-redux'。
( 2)在下列部分：
import React, { useState } from 'reac
浏览 2提问于2020-01-03得票数 2
2回答
externals: {
'react-redux': 'ReactRedux',
'react-dom': 'ReactDOM',
'react': 'React',
'jquery': 'jQuery',
'redux': 'Redux'
}
浏览 2提问于2016-12-12得票数 0
回答已采纳
如果可能的话，我想让我的主组件状态知道而不创建额外的文件.这是我的密码：
import React from 'react';
import { Provider } from 'react-redux';
import { connect } from 'react-redux';
import store from './store';
const App = ({ isAuthenticated }) => {
return (
<Provider store={store}>
浏览 0提问于2019-08-21得票数 4
回答已采纳
我正在创建一个标题，如果用户尚未登录，则显示登录/注册链接；如果用户已登录，则显示退出链接
下面是我的header组件：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
class Header extends Component {
renderLinks() {
if(this.props.authenticated) {
retu
浏览 6提问于2018-02-12得票数 0
回答已采纳
1回答
我的客户端应用程序是使用REACT-REDUX构建的SPA，后端API是带有express框架的nodejs。
问题是在我的客户端应用程序中，人们可以在不登录的情况下访问信息，所以如何在不实际登录到服务器API的情况下对客户端应用程序进行身份验证。
我尝试使用Auth0，但对于单页web应用程序，身份验证仅通过登录完成，有一个机器到机器的选项，但这不适合我的情况，因为我的客户端应用程序是静态的web应用程序，没有服务器来保存客户端id。
浏览 0提问于2019-02-21得票数 0
我的react-redux私有路由器不工作了。它只是向我显示了我试图访问的路线的一个空白页面。并且我的状态在Redux Dev Tools中没有加载。这会不会也是HashRouter的问题？我的PrivateRoute组件：
import React from "react";
import { connect } from "react-redux";
import {Router, Redirect, withRouter } from "react-router-dom";
import PropTypes from 'prop-t
浏览 11提问于2020-05-12得票数 1
回答已采纳
我的路由器函数可以调用Home组件，如下所示
import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";
import NotFound from "./containers/NotFound";
import InputForm from "./containers/InputForm";
import Logout from "./co
浏览 9提问于2019-11-22得票数 0
回答已采纳
我想尝试小的redux示例，所以我安装了redux，但是我得到了这个错误。
TypeError:无法读取未定义的属性“getState”
新提供商webpack-internal:///./node_modules/react-redux/es/components/Provider.js:24:25
代码：
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './
浏览 2提问于2019-02-24得票数 9
回答已采纳
在开发中，它按预期工作，但是一旦我构建了它，在浏览器的根div中就没有任何东西呈现出来。这个问题是在我添加了Router之后才开始出现的。以前的dist版本工作得很好。
代码如下：
index.js
import React from "react"
import ReactDOM from "react-dom"
import Root from "./Root"
import { Provider } from "react-redux"
import PropTypes from 'prop-types'
i
浏览 0提问于2018-09-14得票数 0
1回答
使用react-rails gem创建了一个react rails应用程序，但是当上传到heroku时，react组件都丢失了。不过，它在我的本地服务器上运行良好。这是package.json文件，以防我遗漏了什么。任何帮助都将不胜感激！ {
"name": "my_app",
"private": true,
"dependencies": {
"@babel/preset-react": "^7.7.4",
"@rails/actioncable&#
浏览 6提问于2020-02-02得票数 0
更新:下面的实现没有任何问题。该错误是由于react-redux升级造成的，因为redux现在依赖于功能组件而不是类组件。 import React, { forwardRef } from 'react'
const DivWithRef = forwardRef((props, ref) => {
return(
<div ref={ref} {...props}>
{props.children}
</div>
)
}) class AClassComponent extends Component {
浏览 54提问于2019-05-21得票数 1
回答已采纳
5回答
我有点新的反应，我正面临一个问题的路由器。当我直接在浏览器上输入URL时，路由工作，但是当我单击链接时，URL在浏览器上发生变化(例如，)，但是内容不会被更新(但是如果我进行刷新，它就会更新)。
这是我的github回购：
这是我的MainComponent.js
import React, { Component } from 'react';
import {TransitionGroup, CSSTransition} from 'react-transition-group';
import {Switch, Route, Redirect,withRo
浏览 1提问于2020-10-26得票数 2
回答已采纳
1回答
在元素上引发类型错误
、、、、
我正在使用react-redux和typescript，所以我有.tsx文件。我的简单代码看起来非常简单和明显，但是typescript编译器抛给我一个Provider元素的类型错误，所以我不知道我做错了什么。
下面是我的简单代码
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Route, Router } from 'react-router&#
浏览 2提问于2017-10-11得票数 1
我正在使用这些库：
react: 16.8.6
redux: 4.0.1
react-redux: 7.0.3
我有一个简单的组件(Typescript)：
import ...;
import { connect } from 'react-redux';
class ExampleComponent extends React.PureComponent<IProps, {}> {
constructor(props: any) {
super(props);
}
public render() {
浏览 42提问于2019-06-02得票数 1
回答已采纳
2回答
早些时候，我发布了一个类似的问题：
我试图在protectRoute.tsx中实现受保护的路由：
import { Navigate, Outlet } from "react-router";
import { RootStateOrAny, useSelector } from "react-redux";
interface ProtectRouteProps {}
export default function ProtectRoute(props: ProtectRouteProps) {
const userSignin = useSelec
浏览 10提问于2022-03-02得票数 1
回答已采纳
1回答
我试图在div上使用核心动画来动画它的位置。为此，我必须使用document.getElementById()来选择它。问题是，我的index.html文件中有一个相当复杂的结构，我找不到选择这个div的方法。
下面是index.html结构(我需要选择#el)：
我的index.html文件：
<template is="auto-binding" id="t">
<!-- Route controller. -->
<flatiron-director route="{{route}}" aut
浏览 2提问于2015-02-18得票数 1
回答已采纳
App.js:
import React from 'react';
import { Router, Route } from 'react-router-dom';
import Display from './Components/Display';
export function App() {
return (
<Router>
<Route path="/" component={Display} />
</Router>
);
}
Displa
浏览 5提问于2020-04-29得票数 8
我正在使用redux-form在我的react-redux应用程序中创建一个非常简单的输入表单。我按照redux-form页面的示例进行操作，但它抛出了一个错误。错误的来源来自于尝试将component属性设置为React.DOM.input。它抛出这个错误：
TypeError: _react2.default.DOM is undefined
但是，如果我将字符串'input'传递给component prop，它就可以正常工作，并且我可以在redux dev工具中看到更改后的状态。我只是真的不确定我从哪里得到了把它作为字符串的想法，现在我非常好奇?。
let SubsFo
浏览 3提问于2018-01-15得票数 1
我有一个问题，当添加组件到入口点，这个错误立即弹出这里，如何修复它？我也尝试只添加主组件，但是无论如何，我接受了这个错误，在main.jsx只是类和呈现方法返回"hello“。
_react.default.createContext is not a function
// App.jsx
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRou
浏览 1提问于2019-02-04得票数 71
回答已采纳
1回答
您能建议我如何从父窗体提交按钮提交子窗体吗？
<form #parentForm="ngForm">
<form #childForm="ngForm">
<input type="text" #textBox1="ngModel" required/>
<h1 *ngIf="childForm.submitted && textBox1.inValid">
Error Validation
</h
浏览 6提问于2019-08-03得票数 1
1回答
我得到了中不变的违规错误
不变冲突元素类型无效:期望字符串(用于内置组件)或类/函数(用于组合组件)，但获取: object。
检查Provider的呈现方法。
工作时没有任何问题。它完全相同，除了使用redux6.0和connected-react-router之外，它使用redux5.0.6和react-router-redux。
这次升级会有什么问题，或者我正在做的其他事情会导致这个错误呢？谢谢!您也可以在下面看到一些代码示例。
index.js
import React from "react";
import { render } from "reac
浏览 0提问于2018-12-12得票数 0
回答已采纳
2回答
这一次我可能犯了个愚蠢的错误，但我得到了什么。我从react路由器v4开始，但是我的路由没有发生。我尝试点击url手动以及按一下按钮，没有结果。这是我的路线配置。我正在用LinkContaier重定向
import ReactDOM from 'react-dom';
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from './stores/configureStores';
import {Bro
浏览 3提问于2017-08-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
