如何在React组件之外分派操作
在React组件之外分派操作可以通过以下几种方式实现：
- 使用Redux：Redux是一个可预测的状态容器，它可以帮助管理React应用的状态。通过在组件之外创建一个Redux store，可以在任何地方分派操作。操作可以是一个简单的对象，描述了要对状态进行的更改。在Redux中，操作被发送到store，并由reducers处理。reducers根据操作的类型来更新状态。使用Redux可以实现组件之外的操作分派，并且具有良好的可扩展性和可维护性。
- 使用React Context：React Context是React提供的一种跨组件传递数据的机制。通过创建一个Context对象，可以在组件之外定义一个操作分派函数，并将其传递给需要使用该函数的组件。在组件内部，可以通过Context.Consumer来访问操作分派函数，并在需要时调用它。这种方式适用于较小规模的应用，或者只需要在少数组件之间进行操作分派的情况。
- 使用全局事件总线：全局事件总线是一种在应用程序中进行事件通信的机制。可以使用第三方库如EventEmitter或者自己实现一个简单的事件总线。在组件之外创建一个事件总线实例，并在需要分派操作的地方触发相应的事件。在组件内部，可以订阅这些事件，并在事件触发时执行相应的操作。这种方式适用于需要在多个组件之间进行操作分派的情况。
无论选择哪种方式，都需要注意遵循React的设计原则和最佳实践，确保代码的可维护性和可扩展性。此外，根据具体的业务需求，可以选择适合的腾讯云产品来支持应用的开发和部署。例如，腾讯云提供的云函数SCF可以用于处理后端逻辑，云数据库CDB可以用于存储数据，云存储COS可以用于存储文件等。具体的产品选择和介绍可以参考腾讯云官方文档。
相关·内容
我正在尝试在导出的react组件函数中分派redux操作。有可能吗？或者我应该怎么做而不是这样呢？
import { addToCart } from "../redux/actions/productActions";
export const checker = (item, cart) => dispatch => {
let orderItem = {
...item
};
cart.filter(product => {
if (product.productId === item.id) {
orderIt
浏览 5提问于2020-02-26得票数 1
回答已采纳
在我Store.js文件中，我有以下代码：
export const INSERIR_USUARIO = 'app/login/INSERIR_USUARIO';
export const INITIAL_STATE = {
usuario: null,
};
export default function reducer(state = INITIAL_STATE, action = {}) {
if (action.type === INSERIR_USUARIO) {
return {
...state,
usuario: ac
浏览 0提问于2021-06-25得票数 0
1回答
更新react-native中两个独立组件的状态。
例如，我有两个组件，如contributorOne和contributorTwo，根据contributorOne中发生的一些事件，我想要更新contributorTwo数据的状态。
在contributorOne和contributorTwo组件中没有父子关系，所以任何人都可以帮助我解决这个问题。
浏览 0提问于2016-04-17得票数 1
2回答
如何使用连接获取初始数据
、、、
我在看医生，
我希望尽可能多地使用无状态组件，但我不知道如何处理初始数据有效负载。使用状态响应组件，我的容器和组件将查看：
// Container
const mapDispatchToProps = (dispatch) {
return {
fetchData: () => dispatch(fetchDataAction());
}
}
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
// Component
class MyComponent
浏览 4提问于2017-08-03得票数 4
回答已采纳
1回答
我希望使用Redux将商品(项目、大小和价格)选择从产品列表转移到单独的购物车组件。我设法在我的环境中设置了Redux，但是我不知道如何使用它来获取这些数据。这是我的app.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import {Provider} from 'react-redux';
import s
浏览 3提问于2017-05-26得票数 0
回答已采纳
我想在点击时调用一个反应动作。我希望将存储中的对象设置为null。
这里是我的组件，点击将发生。当用户单击离开页面时，我希望状态为空。
这是我的尝试。在此期间，我了解到您不能导入和调用操作nullPhoto。如果我用nullPhoto导入connect，那么对象一直都是null。
import React, { Component } from 'react';
import {
Navbar,
NavItem,
Container
} from 'reactstrap';
import { connect } from 'react-red
浏览 0提问于2020-07-13得票数 1
回答已采纳
我是react & react-native的初学者。我正在使用react 16，react-thunk，react-redux。
我正在尝试从firestore中获取我已经创建的类别。首先，我使用connect()调用action，然后，我使用thunk输入action，也从firestore获取数据。最后，我在reducer中返回了新状态。当然，我不知道redux过程，所以请给我一些提示。
这是我的代码。谢谢。
CategoryImageList.js (组件)
...
class CategoryImageList extends Component {
component
浏览 40提问于2018-06-03得票数 0
回答已采纳
1回答
我的目标是服务器端呈现使用Node和React/Redux构建的。我正在学习教程，并以项目为例。
我已经加载了我的组件，创建了一个空存储，成功地使用了这些东西来呈现和返回html页面。
我剩下的挑战是找出如何获取信息数据，这样我才能把它放到商店里。我假设，我需要以某种方式告诉商店(后端)分派将填充数据的操作。
示例使用的是函数，它似乎在告诉存储区分派操作，并返回填充了数据(？)的存储。但是它在我头上飞得很远，我不知道它是如何工作的，当我复制代码时，商店仍然是空的。
你能帮我理解一下这是怎么回事吗？我需要做些什么来告诉存储执行操作，这些操作将进入我的API，获取数据，并将其放入存储中？
浏览 2提问于2017-04-22得票数 0
回答已采纳
我正在学习react和redux，并希望创建具有多个字段的表单。因此，由于表单数据是其他组件正常工作所必需的，所以我想将表单状态保存在redux存储中。但是，我假设的是，由于用户每次单击键盘上的按钮时，都会将新的操作分派到存储。问题是它会影响我的应用程序的性能吗？同样，是否可以在redux store中保持表单状态，以及当我们每次单击键盘上的按钮时，都会将新的操作分派到store？这不会影响性能吗？
浏览 1提问于2020-06-08得票数 1
当我使用react.js和react-redux创建一个项目时，我通常会创建一个独立于其他组件文件的操作文件，并使用connect函数将操作创建器导入到组件中，就像这样。 import { deletePost } from "../../actions";
connect(mapStateToProps, { deletePost })(aComponent); 但是在我发现mapDispatchToProps函数的存在后，直接从组件内部将操作分派给reducer会更方便。 const mapDispatchToProps = (dispatch) => {
浏览 14提问于2019-04-14得票数 0
回答已采纳
react-redux库提出了useDispatch，它是一个只能在函数组件中使用的钩子。
import React from 'react';
import {useDispatch} from 'react-redux';
import {action} from './actions';
const funComp = () => {
const dispatch = useDispatch();
const performAction = () => { dispatch(action()) }
return &
浏览 2提问于2020-07-09得票数 0
我必须渲染几张标签。它的ONclick，它应该被突出显示。我有来自还原器的tabList对象(硬编码值)。单击一个选项卡就会生成一个动作，它用单击的选项卡对象设置"state“(我称之为"activeTab")。
在呈现tabList (所有选项卡)时，我正在检查"rendered_tabid == active_tabid“，然后添加一个类"active”(它是条件基)
active-tab-reducer.js
export const tabReducer = () => {
return [
{
id:
浏览 3提问于2016-08-30得票数 1
回答已采纳
我必须通过迭代对象来生成制表符。
父类是TabsList，子类是TabsListItems。数据作为道具从父到子之间流动。现在在子类中有一个<li>元素(它是baisclly选项卡)。应该调用OnClick of it，selectTab方法，它在actiotn.js中，但我的matchDispatchToProps(dispatch )方法在父方法中。
如何调用在父类中绑定的方法？
我将一个对象作为道具传递给子类。
父组件
import React from 'react';
import {connect} from 'react-red
浏览 1提问于2016-08-30得票数 1
回答已采纳
我是个有反应的人，我被弄糊涂了。
这里是我想要实现的目标：
/myapp/#/
全球导航，链接到/myapp/#/和/myapp/#/产品
/myapp/#/产品
全球导航(如上文)
从axios检索的产品列表获取XHR请求。每个产品链接到/myapp/#/products/{productId}
/myapp/#/products/{productId}
全球导航(如上文)
产品清单(如上)
产品详细信息面板，该面板显示从另一个axios检索到的其他详细信息，获取XHR请求。
用户应该能够单击列表中的产品来查看inset产品详细信息面板中的详细
浏览 3提问于2016-12-29得票数 1
回答已采纳
我在学习反应反应。我对redux在功能组件中的使用感到有点挣扎。如何从功能组件调用操作。我看过一些使用react的教程。这对我来说很有意义。但是，这些教程调用操作类型，而不是创建操作类型的函数。
我的案子：
包装容器：是从管理所有数据的包装容器组件传入的，这些数据--蜜源支持--一直传递到LoadedNavbar函数：
<LoadedNavbar isAuthenticated = {isAuthenticated} profile = {profile} />
Functional ：一个带有按钮的导航栏。应该在functional component.How中调用注销操作，我是
浏览 3提问于2020-08-16得票数 10
回答已采纳
1回答
为什么useSelector内部的选择器运行两次？
const selector = (state) => {
console.log("invoke Selector");
return state;
};
function App() {
console.log("render App");
const count = useSelector(selector);
const dispatch = useDispatch();
return (
<div className="App">
浏览 4提问于2021-01-21得票数 5
回答已采纳
2回答
假设我们有两个功能组件App和Product。在产品组件中，您可以轻松地调用父组件(App)中定义的方法，只需将方法作为属性传递(methodA={methodA})即可。有人能告诉我如何从Product组件调用Cart组件中定义的方法吗？
//App.js
import React from "react";
import Cart from "./Cart";
import Order from "./Order";
import Product from "./Product";
const App = props =&
浏览 3提问于2020-03-05得票数 1
1回答
我正在构建一个菜单组件，该组件呈现使用react-router Link组件创建的链接列表。
下面是呈现菜单中每一项的代码：
<li
style={{opacity: this.props.isDragging ? 0 : 1}}
className="list">
<Link to={ this.props.list.url }
activeClassName="active"
className={ this.props.owner
浏览 4提问于2015-12-24得票数 4
我得到了错误：
Actions may not have an undefined "type"属性
但我肯定我给它下了定义并拼写正确。
应用程序：
import React, {Component} from 'react';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { AsyncStorage } from 'react-na
浏览 4提问于2016-11-06得票数 0
我正在尝试让我的应用程序不会抱怨action没有未定义的类型属性。
我设置了我的客户端渲染，如下所示：
import React from 'react';
import ReactDOM from 'react-dom';
import routes from './shared/routes';
import rootReducer from './shared/reducers';
import thunk from 'redux-thunk';
import { createStore, applyMidd
浏览 1提问于2016-09-14得票数 1
回答已采纳
2回答
我有以下操作创建者，由于某种原因，调度中的代码没有执行，尽管我知道loginSuccess()被调用是因为第一个警报触发了。我做错了什么？
import facebook from '../api/facebook'
import * as types from '../constants/ActionTypes';
export function loginSuccess() {
alert("This alerts fine");
return dispatch => {
alert("This doesn&#
浏览 3提问于2016-08-04得票数 3
回答已采纳
我在前端工作，它使用react + redux。
众所周知，redux创建了一个容器组件，它负责托管业务逻辑。实际上，我们将向connect函数提供mapStateToProps和mapDispatchToProps，使用mapDispatchToProps，我们可以将事件分派给还原器。
有多种类型的向导功能，每种都有10个以上的步骤，因此我希望组织“下一步”、“前一步”命令，并在单击按钮时调用子元素函数(例如验证)，但我认为"ref“不是这样做的推荐方法。但是在redux的最初设计中，我必须按照下面的代码发送事件
const mapDispatchToProps = (dispat
浏览 3提问于2017-12-25得票数 2
我有一个嵌套组件，我想在react导航v5的嵌套组件中使用withNavigation。
浏览 2提问于2020-05-25得票数 5
import React, { Component } from 'react';
import axios from 'axios';
import { val } from './signup';
//import Header from './Header'
const url = 'http://localhost:80/form/api/index.php';
class App extends Component {
constructor() {
super();
this.sta
浏览 3提问于2020-11-26得票数 0
我刚开始反应，我已经让react-router、react-redux和Immutable一起工作了。在我的一个组件文件中，我在React中有一个handleItemClick()方法，它按预期工作：
mortgage.js
import import React from "react";
import { connect } from 'react-redux';
import { changeActiveMenu } from '../actions/action';
class Mortgage extends React.Compon
浏览 3提问于2016-12-03得票数 0
回答已采纳
1回答
我刚开始使用redux，所以尝试为身份验证用例找出简单的示例。此代码的web版本从本地存储获取初始状态，并设置为本地存储。将此示例转换为react本机意味着本地存储更改为AsyncStorage，这是异步的，并返回承诺。
如何处理还原器中的异步初始化程序？
import { AsyncStorage } from 'react-native';
import {
LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE, LOGOUT_SUCCESS,
} from '../actions/login';
const ini
浏览 3提问于2016-11-20得票数 1
回答已采纳
2回答
在当前的项目中，我正在使用react，在寻找反应智慧的过程中，我遇到了一个我不明白的“会议”。其他程序员则倾向于在构造函数中放置一个道具来声明。为什么会这样呢？我从未在官方文档中看到过这一点，从这里我了解到，这两件事是可以保存和共享数据的两种不同的东西。有什么用吗?还是我只是个人喜好？
谢谢。
浏览 0提问于2017-09-11得票数 2
回答已采纳
我正试图理解，以便在react本机的屏幕之间导航。
所以首先我创建了这样一个堆叠的视图
import { createStackNavigator } from 'react-navigation';
import Home from './home';
import CoinCapCharts from "./src/container/CoinCapCharts.js"
const screen = createStackNavigator({
Home: { screen: Home },
CoinCapCharts: { scr
浏览 1提问于2018-09-12得票数 0
3回答
有人能告诉我为什么我的redux应用程序不工作吗？我一步一步地从youtube的教程中走出来，但我的状态不是在redux工具中显示的。我仅有的是“国家是平等的”。
counter.js文件(减速器)
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
}
e
浏览 9提问于2020-12-07得票数 4
我有一个React容器组件，它在页面加载时分派一个操作(使用componentDidMount生命周期方法)。该操作调用一个API，一个成功的API调用会导致数据通过reducer添加到我的Redux存储中。
我还有其他一些API，它们需要从初始API调用的响应中获取数据。我在componentWillReceiveProps生命周期方法中有这些，我正在比较this.props和nextProps，以确定我是否有准备好调用这些API的数据。
90%的时间这段代码可以工作，componentWillReceiveProps内部的应用程序接口调用被成功调用，但是另外10%的应用程序接口没有被调用，
浏览 2提问于2017-11-16得票数 1
1回答
如何在单独的父组件中分派操作
、、、、
我正在尝试开发一个应用程序，该应用程序是使用react、redux和redux构建的-路由器-redux。它的构建使得页眉和页脚例如，这就是<App/>的样子：
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<header/>
{routes_for_pages}
<footer/>
</div>
浏览 0提问于2018-02-22得票数 0
回答已采纳
我得到了以下错误：
‘调度’未定义为no-undef
我要做的是，每当用户选择一个ReduxFormField单选按钮时，表单自动提交。
怎样才能从this..dispatch中正确地执行onReduxFormFieldChange操作？
...
import {
Field as ReduxFormField,
reduxForm,
} from 'redux-form';
import { compose } from 'recompose';
...
class MyFormRadioInputs extends React.Component
浏览 1提问于2018-01-19得票数 1
这是我的商店，实现了thunk
store/index.js
import { createStore, applyMiddleware } from "redux";
import reducer from "../reducers/";
import thunk from "redux-thunk";
const store = createStore(reducer, applyMiddleware(thunk));
export default store;
以下是我的行动：
actions/index
export const rem
浏览 0提问于2018-09-13得票数 0
回答已采纳
大约一年前，我学习了React和Redux，直到最近才开始深入使用它们。我惊讶地发现，React和Redux都有相当多的变化。
我注意到的第一件事是，我不能再使用componentWillReceiveProps生命周期方法，它告诉我，我需要使用一些奇怪的getDerivedStateFromProps方法，这并不能真正解决我当前的问题。
基本上，我有一个注册函数，dispatches 3 actions - REGISTER_REQUEST，REGISTER_SUCCESS和REGISTER_FAIL.我的userReducer中还有三个标志-- registering，registered
浏览 0提问于2020-06-26得票数 0
回答已采纳
1回答
在redux中，要显示组件，我可以使用Link来显示组件，或者我应该使用调度来显示组件。
import React from "react";
import Masterlayout from "../Masterlayout";
import "./py.css";
function Python() {
const show = () => {
<Link to="/Form"></Link>;
};
return (
<div>
<
浏览 1提问于2022-11-25得票数 -1
2回答
在一个使用钩子设计的React中。我不认为需要中间件，或者我是不是遗漏了什么？
Redux-thunk逼近
const Component = () => {
const dispatch = useDispatch()
const user = useSelector(state => state.user)
useEffect(() => {
dispatch(getUserFromApiAndDispatch())
}, [])
return <div>{user}</div>
}
或者只是简单的
const Component = (
浏览 5提问于2021-11-27得票数 0
回答已采纳
我确实有这么多的axios调用，我已经在各自的catch块中为它们编写了错误处理代码，但我需要的是为单独文件中的所有错误定义一个通用错误处理程序，并根据错误分派操作，以便更改存储状态。
我尝试过分派操作，但分派没有绑定，因为在操作创建者中，我们手动绑定它，但在这里，我没有绑定任何地方的分派
handleErrors: () => dispatch => {
alert("error function called");
dispatch({type: "HELLO"});
}
我想在此函数中使用未连接到red
浏览 2提问于2019-08-01得票数 0
在输入字段中输入文本并单击submit按钮后，会发生错误: Uncaught :调度不是onSubmit上的函数
连接状态和道具似乎是正确的。
有什么不对的？
*/TODOLIPUT*/
import React from 'react'
import { connect } from 'react-redux'
import {addTodo} from '../actions/index'
import {bindActionCreators} from 'redux'
let AddTodo = ({ dispatc
浏览 3提问于2017-04-25得票数 0
回答已采纳
反应本地应用程序
存储(状态和后端)是通过redux中间件使用axios和redux构建的，请求需要后缀_SUCCESS和_FAIL。试图使用redux axios中间件进行API调用。但是，数据并没有传递给组件。由于某种原因，还原器只执行默认情况。
行动：
import { Actions } from "../../../constants/actions";
export const getNewsBloomberg = () => {
return {
type: Actions.GET_NEWS_BLOOMBERG,
payload: {
浏览 1提问于2020-09-21得票数 0
回答已采纳
1回答
我有一个组件'DashboardServiceEntry‘，用作仪表板的入口点。
“仪表板”从Redux读取当前的Options.viewLevel，并使用它进行API调用并显示要显示的内容。
在'DashboardServiceEntry‘中分配useEffect中的操作，更新redux，但在存储中可用之前，'Dashboard’组件将呈现并在redux存储中读取错误的值，从而触发不必要的api调用。
当redux正确更新时，另一个API调用(正确的调用被启动)。
如何使Dashboard组件仅在商店更新后才被加载？
谢谢你们善良的人。
import Dashboar
浏览 7提问于2022-02-01得票数 0
我正在尝试组合react-router v4、react和redux。因为react-router会跟踪URL，所以我选择在redux-model中保留这段状态。
但是当react-router发生路由更改时，我仍然需要一种方法来分派redux操作。哪里是做这件事的最佳地点？
我的第一个尝试是将它放在react-router的Link的onClick属性中：
render() {
// link config
const links = this.props.photo.album( album => {
<Link key={album.name}
浏览 14提问于2018-02-06得票数 2
回答已采纳
2回答
我是React，Redux和JS的新手。我想知道如何在组件中链接操作？在列表屏幕上，我应用程序检索用户的地理位置，然后使用当前的long和lat获取api url。
我超时完成了。但我认为这是一种冒险的方式。
import {
aFetch,
aGetPosition,
} from '../../actions';
import { API_URL } from '../../config/ApiEndpoints';
class App extends Component {
componentDidMount() {
this.pr
浏览 11提问于2017-01-18得票数 0
回答已采纳
2回答
我正在使用‘’上传文件到我的服务器上。如果成功的话，我会收到这个文件内容的响应。因此，在一个组件中，我希望上传文件并更改存储状态，而在另一个组件中，我希望显示数据。
但我不知道为什么我的调度功能不能工作。
组件与上传器：
import React, { Component } from 'react';
import FileUpload from 'react-fileupload';
import { connect } from 'react-redux';
import { updateOverview } from '../ac
浏览 3提问于2017-09-03得票数 4
回答已采纳
1回答
componentDidMount()只调用了一次，但其中的分派和订阅函数被调用了多次...此函数的第一行只执行第一次，但每次重新呈现我的组件时都会调用订阅函数。react如何在不遇到console.log(“已挂载”)的情况下到达订阅函数，即函数的第一行？
componentDidMount() {
console.log("mounted"); //executed just once
const {store}=this.props;
store.subscribe(()=>{
console.log("S
浏览 4提问于2021-07-19得票数 1
我有一个组件(SearchFilter.js)，并且正在使用connect在导出时触发mapStateToProps和mapActionsToProps。
问题是，mapStateToProps没有启动--在React中没有出现任何道具(状态和动作)，我甚至无法从mapStateToProps内部控制日志。
我试过查看 ，但它们似乎大多是排字，或者操作本身不起作用。
更重要的是，我已经为另一个组件(Counter.js)提供了一个几乎相同的redux设置，它可以完美地工作。
我认为这可能与我如何提供到组件的存储/路由有关(参见下面的App.js )，因为React.Provider出现在计数
浏览 0提问于2021-01-19得票数 1
回答已采纳
1回答
我一直在调试这个程序，但毫无头绪，我逐字逐句地遵循教程，试图制作一个TODO应用程序，但我不知道为什么我会收到这个错误消息。
./src/cuers.js
第12行：“分派”未定义为no-undef
第13行：“分派”未定义为no-undef
components.js
import React from 'react'
class Todo extends React.Component {
render() {
const { todo } = this.props
if (todo.isDone) {
浏览 3提问于2017-08-30得票数 3
回答已采纳
1回答
我来自一个Angular2世界，那里有一些服务可以进行正常的数据加载等等，现在我正在使用React，Redux应用程序，并试图找出与Redux中的Angular2服务等价的东西( are )。是Redux-thunk吗？
浏览 2提问于2017-02-28得票数 1
import React, { useReducer } from "react";
..。
import { useDispatch } from "react-redux";
..。
import { createStore } from "redux";
const store = createStore(
..。我看到所有的操作都会触发，但是useReducer调度不会更新redux状态。
浏览 0提问于2020-04-02得票数 8
回答已采纳
我想创建一个类来管理我的api调用，我也需要在我的类中访问我的redux函数，但由于它不是一个react组件，我无法在其中连接，我尝试直接访问我的存储，但我不知道如何访问我的redux函数，请帮助我与您的建议。 谢谢。 下面是我的代码： import { PixelRatio, Dimensions, Platform } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {getInitUrl} from './r
浏览 14提问于2019-07-03得票数 0
2回答
我对redux/react是个新手。我正在做一个简单的rest调用，通过触发一个动作来获取一些细节。但是我得到了以下错误
BSC.js?d219:24 Uncaught TypeError:
this.props.fb is not a function.
我的代码如下所示：
export function fb(){
return dispatch => {
dispatch({
type: SUCCESS,
payload: {"key1":"value1","key2"
浏览 0提问于2018-07-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
