将redux连接到单个react组件
将 Redux 连接到单个 React 组件是通过使用 React Redux 库来实现的。React Redux 是一个用于在 React 应用中集成 Redux 状态管理的官方库。
Redux 是一个用于管理应用状态的 JavaScript 库，它可以帮助我们在应用中更好地组织和管理数据。它使用单一的全局状态树来存储应用的所有状态，并通过使用纯函数来处理状态的变化。
要将 Redux 连接到单个 React 组件，我们需要执行以下步骤：
- 安装依赖：首先，我们需要安装 React Redux 库和 Redux 库。可以使用以下命令进行安装：
- 安装依赖：首先，我们需要安装 React Redux 库和 Redux 库。可以使用以下命令进行安装：
- 创建 Redux Store：我们需要创建一个 Redux Store 来存储应用的状态。Store 是 Redux 的核心概念，它是一个包含应用状态的对象。
- 创建 Redux Store：我们需要创建一个 Redux Store 来存储应用的状态。Store 是 Redux 的核心概念，它是一个包含应用状态的对象。
- 创建 Redux Reducer：Reducer 是一个纯函数，用于处理状态的变化。我们需要创建一个或多个 Reducer 来定义状态的变化逻辑。
- 创建 Redux Reducer：Reducer 是一个纯函数，用于处理状态的变化。我们需要创建一个或多个 Reducer 来定义状态的变化逻辑。
- 创建 React 组件：我们需要创建一个 React 组件来连接到 Redux Store，并访问其中的状态和操作。
- 创建 React 组件：我们需要创建一个 React 组件来连接到 Redux Store，并访问其中的状态和操作。
- 在上面的代码中，我们使用
connect函数将组件连接到 Redux Store，并通过mapStateToProps和mapDispatchToProps函数将状态和操作映射到组件的属性。 - 在应用中使用组件：最后，我们可以在应用的其他地方使用这个连接到 Redux 的组件。
- 在应用中使用组件：最后，我们可以在应用的其他地方使用这个连接到 Redux 的组件。
- 在上面的代码中，我们使用
Provider组件将 Redux Store 提供给应用的其他组件。
这样，我们就成功地将 Redux 连接到单个 React 组件中了。通过这种方式，我们可以在组件中访问 Redux Store 中的状态，并通过操作来改变状态。这种连接方式可以帮助我们更好地管理和共享应用的状态，并提供可预测性和可维护性。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）。
相关·内容
我有一个反应组件，如下所示：
Component1.js
import React from 'react';
import Component2 from './Component2.js';
const Component1 = () => (<div data-test="component1-component"><Component2 /></div>);
Component2.js
import React from 'react';
import { connect } f
浏览 0提问于2019-08-21得票数 2
我在react项目中看到了很多不同的redux实现。从今天开始，我一直遵循这样的原则:将容器连接到redux并传递道具。在另一个实现中，我看到一个曾-曾-孙子也可以连接到redux。为什么要将子组件连接到redux？
浏览 0提问于2016-11-15得票数 1
我正要用React-Redux开始一个项目。对于API引用，有Hooks和connect()。因此，Hooks是连接API的替代。使用钩子或连接到我的React-Redux项目有什么不同？
浏览 0提问于2019-09-20得票数 16
我正在使用reducer，它看起来reduct可以连接到redux，但不能连接到道具。我已经看到了状态值，但它与道具无关，.could，有人能帮我找出如何攻击道具吗？
1-reducer_books.js
------------------------------------------------------
export default function () {
return [
{ title: 'testTitle1' },
{ title: 'testTitle2' },
{ title: 'testTitl
浏览 2提问于2018-10-08得票数 0
我正在用react redux做一个项目，连接到firebase和firestore，但是控制台显示了图像的警告。
我正在使用react-redux-firebase 3.3.0和react-redux 7.2.0
我真的找过怎么修了，但我什么也没找到，希望你能帮我。
浏览 6提问于2020-04-14得票数 0
1回答
在Redux/React应用程序中，我使用生命周期方法componentDidCatch()来捕获和处理React UI呈现过程中的错误。有没有一种方法可以自动通知Redux存储在那里捕获的错误，而不需要调度操作？
浏览 13提问于2018-02-27得票数 0
回答已采纳
我有一个类扩展了react.component。另一个类从这个类扩展到一个redux存储。
import React from 'react'
class A extends React.Component{
constructor(props){super(props); ...}
...
}
import React from 'react'
import {connect} from 'react-redux'
@connect(store=>{...})
class B extends A{
constru
浏览 2提问于2017-05-16得票数 0
回答已采纳
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
我在react-redux中使用React和Redux，我正在创建一个高级组件，我想连接到Redux存储，如下所示：
const HoC = parameter => WrappedComponent =>
return class WithSelected extends Component {
// ..some use of 'parameter'
render() {
return <WrappedComponent />
}
[...]
const exportComp
浏览 2提问于2019-11-20得票数 5
回答已采纳
只使用的管理状态
我知道，如果您只使用React创建应用程序，那么您最终将在您创建的不同的React组件中管理您的所有状态。
使用React和Redux管理状态的
如果您决定结合使用Redux和React，则可以将所有状态从每个React组件移动到整个Redux应用程序状态。每个组件需要一个Redux应用程序状态的片段，然后可以通过React Redux的connect函数连接到状态。
问题
这是否意味着您不再需要编写任何处理React的state (即this.setState)的React组件，因为React Redux是将数据以props的形式传递到container组件，从而使Redu
浏览 2提问于2016-03-24得票数 13
回答已采纳
我明白为什么我不应该将整个redux状态连接到每个组件。但是动作创建者呢？我可以只有一个索引文件，在一个默认导出中导出所有动作创建器，并一次性连接到每个组件，而不需要逐个挑选它们吗？
import { connect } from 'react-redux'
import { RootState } from '../../redux/rootReducer'
import allActions from '../../redux/actions'
const mapStateToProps = (state: RootState) =>
浏览 0提问于2020-02-27得票数 0
我通常从react-redux导入{ connect }，以将我的React组件连接到Redux存储。有没有其他方法可以在不使用{connect}的情况下从react组件访问redux存储？
浏览 1提问于2021-03-08得票数 0
3回答
我正在构建一个中等大小的React/Redux应用程序，我对React非常满意--然而，Redux仍然有点难以理解。
我知道我可以使用来自Redux的connect()将任何组件或容器连接到Redux状态。然而，我不清楚什么时候该这么做--这是基于复杂性吗？需要将多少道具传递给子组件？
我可以使用哪些因素来确定何时使用connect()？
编辑以提供一个示例：
例如，我想在我的应用程序中为用户提供一个消息区，特别是一个显示未读消息数量的徽章。我会简单的connect()任何组件我想要显示的徽章吗？
浏览 7提问于2016-07-22得票数 7
回答已采纳
2回答
我目前正在使用React，React Router和React Redux构建一个应用程序
版本：
React - v15.5.4
React路由器- v4.0
React Redux - v.5.0.6
我是个新手，甚至是Redux的新手，当我开始接触connect HOC的时候，我开始有这个错误，我似乎找不到。
当我在<switch>元素和一些<Route>元素之后将一个组件连接到我的redux存储时。我的connect中返回的props为false布尔值，而connect中的组件具有正确的props。
有关示例，请参阅下面的代码和错误。
组件
UserDashbo
浏览 1提问于2018-02-12得票数 0
在这个小小的Redux应用程序中，我试图制作两个非常简单的计数器，它们可以相互独立地工作。
目前只有Counter1连接到商店：
const App = connect(mapStateToProps, mapDispatchToProps)(Counter1);
商店是由allReducers组成的：
const store = createStore(allReducers, composeEnchancers());
所以，我明白了：
隐藏错误:对象作为React子对象无效(找到:键为{CounterReducer1，CounterReducer2}的对象)。如果您打算呈现一个子集合，
浏览 3提问于2017-08-11得票数 2
回答已采纳
我正在使用and redux将redux连接到我的redux本机项目，但是当我使用export default connect(state => ({ count: state.count }))(Test)方法并导入作为creactStackNavigator({test:Test})的响应导航时，它将显示
The component for route 'test' must be a React component
import MyScreen from './MyScreen';
...
test: MyScreen,
}
但是当我移除conn
浏览 0提问于2019-04-22得票数 2
回答已采纳
2回答
React可以使用所有的React特性，比如组件状态和生命周期方法，而不需要类声明(只是函数组件)。这减少了样板，复制和协商使用容易出错的this关键字.此外，由于功能组合，它使得在不相关组件之间分离和共享公共状态管理逻辑变得更加容易。
但是，钩子并不能用集中式和可预测的状态容器来代替Redux。是否有可能将连接到Redux，因为我只想接受未来React的函数范例，并且仍然使用Redux？
浏览 1提问于2019-09-08得票数 0
回答已采纳
我正在构建一些即时通讯应用程序，在前面使用React和Redux。我有“Main”(初始化web套接字并呈现其他组件)、“聊天”、"FriendsList“和”朋友“等组件。
我经常发现我自己在想，我是否应该把一个孩子或一个孙子直接连接到Redux (假设它需要它)，或者把那些道具从父母/祖父母那里传递出去。
例如，我以这种方式在主组件中呈现"Chat“：
<Chat
onTyping={this.onTyping}
onSubmitMessage={(value) => { this.submitMessage(value) }}
mes
浏览 0提问于2018-12-14得票数 2
回答已采纳
我搞不懂为什么create-react-app两者都有
import {store} from './our-redux-store'
const app = () => {
return (
<Provider store={store}>
<WholeAppGoesHere/>
</Provider>
)
}
与使用connect连接组件相比，如下所示：
import {connect} from 'react-redux';
class MyComp
浏览 0提问于2020-02-27得票数 0
我创建了这个组件：
import React, { Component } from 'react';
import { connect } from 'react-redux';
export class Todos extends Component {
render() {
//todo remove
console.log('testing this.props.todos', this.props.todos);
//todo remove
debugger;
return (
浏览 0提问于2017-06-16得票数 1
回答已采纳
在React / Redux中，如果我们的Counter组件代码是30行，假设我们想要一个计数器作为countNoodle连接到Redux store，另一个计数器作为countDrink连接到Redux store，我们需要复制这30行代码吗？
我没有想到我们需要CounterNoodle.js和CounterDrink.js来连接到Redux，每个文件可能有40行长，而且有很多重复的代码。
或者，如果Counter是类组件或函数组件，我们可以重用代码吗？
浏览 10提问于2020-02-25得票数 0
2回答
我使用react-native和redux和redux-thunk。基本上，我有一个连接到store的Component，它用dispatch修改其中的一些信息。尽管每个操作似乎都是同步的，但我在修改后的下一行上获得了旧数据。
//reducer
import {assign as _assign} from 'lodash-es';
let initialState = {name: '1'};
export default (state = initialState, action) => {
switch (action.type) {
浏览 0提问于2017-09-26得票数 1
嗨，我有两个react组件parent和child，它们都连接到redux store到同一个对象，对象从服务器asynchronously获取数据。
问题：在接收新道具时，父母的componentWillReceiveProps会被执行，但是孩子的componentWillReceiveProps没有执行任何想法？？
子组件
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redu
浏览 2提问于2017-08-14得票数 1
1回答
我想构建一个单页面登录系统，它根据我在React-Redux存储中设置的状态呈现不同的页面。当存储的状态更新时，render() {}函数不会更新。 App.js import React from 'react'
import store from './redux/store'
import { Provider } from 'react-redux'
// Route to Renderer.js below
import Renderer from './Renderer'
class App extends R
浏览 24提问于2020-04-29得票数 1
回答已采纳
我试图分离一个组件，就像标题中提到的那样。
根据redux redux react教程，拆分组件是一种最佳实践。
到目前为止，我有以下组件：
ReduxTestNetwork
import React, {Component} from 'react';
import {Edge, Network, Node} from '@lifeomic/react-vis-network';
import { connect } from "react-redux";
import MyNetwork from "./MyNetwork";
浏览 0提问于2018-11-30得票数 0
回答已采纳
我可以在v6. redux表单中配置和其他redux参数吗？
在redux-form ~> 中是这样的
reduxForm(配置:Object，mapStateToProps?，mapDispatchToProps?，mergeProps?，选项？)
创建一个装饰器，使用Redux窗体将窗体组件连接到Redux。它接受一个配置参数，然后可选地接受mapStateToProps、mapDispatchToProps、mergeProps和options参数，这些参数与react的connect()函数的参数完全对应，允许您将表单组件连接到Redux中的其他状态。
。
例如：
im
浏览 5提问于2016-07-05得票数 0
回答已采纳
我习惯于将React组件连接到Redux，如下所示： 在index.js中： import { connect } from "react-redux";
import { doThing } from "store/actions";
import Component from "./component";
const mapState = (state) => {
const { foo } = state;
return {
foo
};
};
const mapDispatch = {
doThing,
浏览 24提问于2020-04-24得票数 1
回答已采纳
我试图使用react + redux + react-redux + react-router理念将组件连接到商店。即使父程序封装了存储库，我也会得到这个错误：
[Invariant Violation: Could not find "store" in either the context or props of "Connect(Body)".
Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to
浏览 2提问于2016-01-24得票数 2
2回答
如何在公共标头下嵌套组件
、、、
试着理解react-router的基本知识，我有点不知所措，选择和选择。我有一个react + redux应用程序，它是根据提供的一般指导原则构建的。
本质上，我所需要的是跨所有路由的公共Header组件；用户可以在头上单击一个按钮来更改主组件(每个视图提供不同的数据可视化)。这个容器还应该链接到redux存储，并让公共数据流下到选择的主要组件。这让我觉得这是一个超级普通的需求，但我找不到一个坚实的示例/教程>_<。
到目前为止，设立的情况如下：
// index.jsx --> sets up the redux store and react-router routes
浏览 2提问于2016-08-24得票数 1
回答已采纳
这是我在redux-thunk和类组件中使用的基本模式。下面的代码导出一个类定义MyClass，该类定义与mapStateToProps引入的状态正确连接，并有权访问在mapDispatchToProps中定义的操作。
import React from 'react';
import { ThunkDispatch } from 'redux-thunk';
type OwnProps = ... // whatever
const mapStateToProps = (state: RootState, ownProps: OwnProps) =>
浏览 11提问于2022-09-21得票数 0
1回答
我有一些反应组件，需要获取某些项目来显示。除了一个非常简单的componentDidMount回调之外，这些组件可以是功能性组件。有一个好的设计模式可以让我回到功能性组件吗？
class Things extends React.Component {
componentDidMount() {
this.props.fetchThings()
}
render() {
things = this.props.things
...
}
}
我正在使用react，我还使用connect将组件连接到我的还原器和操作。这是那个文件：
import { co
浏览 1提问于2017-04-04得票数 0
回答已采纳
我们有一个组件需要访问Redux的存储。
import React from 'react'
import { connect } from 'react-redux'
const Component = (props) => {
... code ...
}
我们已经使用connect将此组件连接到存储。
export default connect(mapStateToProps)(Component)
现在我们需要定义作为第一个参数传递给connect的mapStateToProps。
const mapStateToProps = stat
浏览 1提问于2019-06-18得票数 7
当路由加载时，我想使用react路由器的onEnter钩子来检查我的redux存储中的变量。
根据医生的说法，onEnter
...receives下一个路由器状态作为它的第一个参数。replaceState函数可用于触发到另一个URL的转换。
没有商店经过。是否有可能从这个钩子中连接到redux商店？我尝试过各种各样的事情，但却找不到实现这一目标的方法。
我正在使用的版本：
"react-redux": "^4.0.0",
"react-router": "1.0.0-rc1",
"redux":
浏览 11提问于2015-11-02得票数 10
回答已采纳
2回答
我在这里试图做的是从redux存储中获取数据，并在Options对象中使用它。我不知道如何用redux中的数据填充选项obj的部分内容。在redux-logger中，我看到一切正常，数据存储在redux状态。我认为问题可能在于访问Options对象中的道具，但不知道如何传递这些道具。高图表用于数据显示。
this.props.myValue从mapStateToProps访问数据是否只在连接到redux存储的react组件中工作？
import React from 'react'
import { connect } from 'react-redux'
im
浏览 3提问于2019-12-31得票数 0
回答已采纳
我正在构建我的第一个Reactive原生应用程序，我遇到了一个连接到redux商店的问题(我还没有太多的redux经验)。我在用世博会。
错误是：
不变违规:无法在"Connect(App)“上下文中找到"store”。或者将根组件包装在连接选项中，或者将自定义的React提供程序和相应的React使用者传递给connect选项中的Connect(App)。
此错误位于: in Connect(App) (at withExpoRoot.js:22) (.)
这是我的代码：
你能帮忙吗？
// App.js
import React, { Component } fr
浏览 0提问于2019-03-26得票数 1
回答已采纳
我在我的应用程序中使用Firebase认证和redux。我将firebase.auth().onAuthStateChanged添加到App.js的componentDidMount函数中，以检查整个应用程序的用户登录状态。我尝试将App.js连接到redux操作的getUserProfile函数，如下所示：
App.js
import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { Provider
浏览 0提问于2019-03-24得票数 1
我正在使用angular和redux (ngRedux)构建一个应用程序。现在我想使用react而不是angular来提高性能。它是一个巨大的应用程序，所以不可能从头开始构建它。因此，我想使用angularJS (angular-ui-router)的路由，当任何"abc“状态变为活动状态时，react组件变为load，该react组件应针对每个单独的事件使用纯redux。
我如何维护我的应用程序，因为单个模块是在react-redux中构建的，并且只能通过路由状态连接到angular。请记住，应用程序的其他模块也不应受到干扰。
浏览 0提问于2017-03-31得票数 2
我在react中创建了一个计算器。现在我想使用全局状态而不是局部状态-我知道这个解决方案可能没有更大的会话，但我想以这种方式学习redux。我准备了动作和减速机。我不知道如何传递这些值--我得到一个不存在的结果变量的错误。
链接到具有本地状态的应用程序：
使用redux链接到应用程序：
代码: index.js
import React from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider
浏览 0提问于2020-07-09得票数 0
2回答
我有一个组件，它连接到一个使用redux的商店(为了简单起见，我缩短了代码)：
const Address = (props) => {
const { userAddresses, removeAddress } = props
let { showEdit } = props
return (
<div>
{userAddresses.map(address => (
<div key={address.id}>
&l
浏览 0提问于2019-01-12得票数 2
回答已采纳
1回答
使用类型记录作为语言，我已经声明了一个有约束的类。我需要将连接方法应用于它。
import * as React from 'react';
import { connect } from 'react-redux';
import { initAskadeFiles } from '../Entities/Askade/Askade.Actions';
import { Dispatch } from 'redux';
interface IProp<T> {
PropOne: T
}
interface
浏览 0提问于2018-08-17得票数 0
在React应用程序中使用Redux的最佳实践是将组件包装在“提供者”组件中： const rootElement = document.getElementById('root')
ReactDOM.render(
<Provider store={store}>
<TodoApp />
</Provider>,
rootElement
) 你可以在React-Redux文档中看到：https://react-redux.js.org/introduction/basic-tutorial。 我们从这种态度中得到的好处
浏览 53提问于2019-04-21得票数 0
我正在尝试从初始状态的根还原器初始化一个基本存储。
我的根减速器
import Entity from "../api/Entity";
import { UPDATE_GROUPING } from "../constants/action-types";
import IAction from "../interfaces/IAction";
import IStoreState from "../interfaces/IStoreState";
const initialState:IStoreState = {
ca
浏览 1提问于2018-06-01得票数 1
回答已采纳
我们的应用程序使用捕捉错误。这很好，它在定义的位置显示了一个错误消息，就像它应该显示的那样。但是在错误表现出来后，路由停止工作，本质上破坏了应用程序！
我觉得这有点奇怪，因为这个应用程序似乎不起作用:当我单击链接和/或使用后退按钮时，DevTools显示routing/LOCATION_CHANGED动作被分派(我正在监听history对象)，url被更新，但没有呈现新的路由/屏幕。
由于React和Redux都在工作，所以我已经指出了React路由器，因为它是处理路由的主要组件。有人知道我怎样才能阻止它的破坏吗？
示例错误
此错误来自连接的组件，并发生在mapStateToProps中。
c
浏览 0提问于2019-08-26得票数 2
我的应用运行得很好，下面是主文件：
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from '../src/store/store';
ReactDOM.render(
<Provider store={store}>
<App />
浏览 1提问于2017-03-11得票数 1
2回答
我刚刚开始使用React/Redux，当我测试Redux时，一切都工作得很好。
但是，我无法将其连接到我的实际应用程序中。
我假设我应该使用connect()，但我不知道如何使用/在哪里使用。
// libraries
import React from 'react';
import ReactDOM from 'react-dom';
// redux
import { Provider } from 'react-redux';
import store from './redux/store';
import '
浏览 0提问于2017-09-14得票数 0
1回答
我有一个连接到redux示例的最简单的redux表单：
import * as React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
class TestForm extends React.PureComponent {
render() {
return (
<form>
<Field c
浏览 1提问于2019-02-13得票数 2
回答已采纳
2回答
我正在努力将redux store连接到react-native应用程序中，但似乎遗漏了一些东西。任何帮助都将不胜感激。
action.js
export const getdata = (data) => {
return (dispatch, getState) => {
dispatch({
type: "GET_DATA",
data
});
};
};
reducer/dataReducer.js
export default (state = {}, action) => {
浏览 4提问于2017-06-23得票数 0
目前，在根组件中，它被设置为默认直接转到Login页面。但是，我想将它设置为检查本地存储中是否已经存在令牌，如果存在，则跳过Login页面并直接导航到主页。
使用我设置的下列代码，它将导航到主页，但在导航到主页之前会出现登录页。
我怎样才能直接到主页而不显示主页呢？
这里是代码：
import React from 'react';
import {render} from 'react-dom';
import configureStore from '../redux/store'
import { Provider } from '
浏览 9提问于2016-10-12得票数 2
2回答
目前，如何将React组件连接到redux存储有两个概念：和。我想知道使用钩子是否被认为是好的软件设计。
它损害了单一责任原则，因为组件不仅负责数据的呈现，而且还负责连接到存储。
组件和Redux之间存在紧密耦合。很难重用组件或从Redux切换到另一个状态管理解决方案。
在软件质量方面，钩子比connect()有什么优势吗？
浏览 3提问于2020-01-23得票数 12
回答已采纳
我有几个一般性的问题，我想得到一个答案…我自己在以下方面做了研究：
·firebase文档在设置firebase、redux、react状态时几乎没有成功。
·我知道firebase youtube频道的React和firebase设置的两部分视频系列，但没有任何关于将redux集成到该生态系统的内容。
·这个youtube上的视频已经有两年多的历史了，我不知道它们是否仍然适用()。
·我发现了一些与这种类型的设置相关的教程，但对我来说，它们似乎非常固执己见，我不知道这些设置是最优的还是具有反模式的(、 --直接来自参考资料部分中的redux文档，我可能是错的，但它似乎没有得到维护，其他的：，
浏览 23提问于2019-03-29得票数 -1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
