为什么没有在subscribe块中调用store.dispatch()？
在Redux中，subscribe方法用于订阅store中的状态变化。当调用store.dispatch()方法触发一个action后，Redux会根据reducer的逻辑进行状态的更新，并通知所有已经订阅的函数。因此，为什么没有在subscribe块中调用store.dispatch()是因为在subscribe的回调函数中调用store.dispatch()可能导致无限循环。
当我们在subscribe中调用store.dispatch()时，会触发一个action，并引发reducer的执行。然而，reducer执行完成后，由于状态更新，subscribe中的回调函数将再次被调用。如果在回调函数中再次调用store.dispatch()，则会再次触发action，再次引发reducer执行，如此往复，导致无限循环。
这是因为在subscribe方法中执行store.dispatch()，会将dispatch的action加入到当前执行的action队列中。由于subscribe的回调函数是在当前的action执行完毕后才执行的，因此又会触发新的action，再次执行subscribe中的回调函数。这种情况下，循环会一直进行下去，直到栈溢出或其他错误发生。
为了避免这种无限循环的问题，Redux禁止在reducer中直接调用store.dispatch()。在实际开发中，我们应该将store.dispatch()放在组件的逻辑中，例如在用户交互事件处理函数中触发dispatch，或在生命周期钩子函数中调用。这样可以保证单向数据流的正常进行，避免不必要的循环。
总结： 在subscribe块中不应该调用store.dispatch()，因为这样可能导致无限循环的问题。Redux禁止在reducer中直接调用store.dispatch()，应该将store.dispatch()放在组件逻辑中，例如用户交互事件处理函数或生命周期钩子函数中调用。这样可以保证单向数据流的正常进行。
相关·内容
我正在学习如何使用store.subscribe()方法创建取消订阅()。下面是密码。我不明白逻辑:为什么我们使用store.subscribe方法将取消订阅常量声明为存储的取消订阅函数。(从字面上讲，订阅者应该为商店订阅“某样东西”，对吗？)
import store from './store';
const unsubscribe = store.subscribe(
() => console.log("Store changed!", store.getState())
);
store.dispatch({
type: &#
浏览 2提问于2020-10-30得票数 0
3回答
我有一个拦截器，用于在访问令牌过期时捕获401个错误。如果过期，它会尝试刷新令牌以获取新的访问令牌。如果在此期间进行了任何其他调用，则这些调用将排队等待，直到验证访问令牌为止。
这一切都运行得很好。但是，在使用Axios(originalRequest)处理队列时，不会调用最初附加的承诺。请参见下面的示例。
工作拦截器代码：
Axios.interceptors.response.use(
response => response,
(error) => {
const status = error.response ? error.response.status
浏览 3提问于2018-07-28得票数 75
回答已采纳
1回答
我读了很多关于异步等待的文章，但显然我仍然不明白。;-)
我正在尝试将以下.then承诺结构转换为异步等待：
componentDidMount() {
const { store } = this.props
Promise.all([
API.fetchTodos(),
API.fetchGoals(),
]).then(([ todos, goals ]) => {
store.dispatch(receiveDataAction(todos, goals))
})
store.subscribe(()
浏览 1提问于2018-06-04得票数 1
回答已采纳
我不知道如果我不写'default‘，为什么初始状态会是'undefined’？
function counter(state = 1,action){
switch(action.type){
case 1:
return state + 1;
case 2:
return state - 1;
}
}
const store = createStore(counter);
let currentValue = store.getState();
const listener
浏览 0提问于2017-05-16得票数 0
以下代码使用简单Redux API：
// Dummy Reducer that just returns previous state
const counter = (state = 0, action) => {
return state;
}
// Store
const { createStore } = Redux;
const store = createStore(counter);
const listener = () => {
console.log('Listene
浏览 2提问于2017-10-21得票数 3
我在探索ES6 const关键字，除了一些我无法理解的范围问题之外，一切都在为我工作。
我有一个简单的js文件
const reducer = (state = 0,action) => {
switch(action.type) {
case 'Increment' :
return state+=1;
case 'Decrement' :
return state-=1;
default :
return state
浏览 1提问于2016-09-20得票数 0
2回答
这是一个有效的递归函数吗？
、、、、
我在库中发现一个递归表达式非常混乱。代码在这里：
export function batchedSubscribe(batch) {
if (typeof batch !== 'function') {
throw new Error('Expected batch to be a function.');
}
const listeners = [];
function subscribe(listener) {
listeners.push(listener);
return function unsubscri
浏览 6提问于2015-12-09得票数 3
回答已采纳
1回答
有没有一种既定的方法将redux状态绑定到对象上？
我想做这样的事情：
MyApi.setStore(myReduxStore, 'stateVar')
我尝试过传递各种get/set操作和store侦听器，但它很混乱。
MyApi.getState = () => store.dispatch(getAction())
MyApi.setState = (state) => store.dispatch(setAction(state))
let currentState
store.subscribe(() => {
let previousState
浏览 1提问于2017-03-09得票数 0
我有一个组件，在ngOnInit()中，我有两个我已经订阅的服务。 我的问题是，当我重新加载页面时，其中一个服务被正确调用，但不知道为什么在获得更多actions.Can nanyone帮助后，其中一个服务被跳过并执行？ ngOnInit() {
this._service1.getItem().subscribe((data)=>{
store.dispatch(actionCreators.action1({payload:data}))
}
)
this._service2.getFRuits().subscribe((data)=>{
........
}) } 服务
浏览 25提问于2020-06-23得票数 0
这个createStore函数接受还原器函数，但我并不真正理解发生了什么，当我们执行store.getState()时，它如何知道计数器的当前状态，我知道createStore()将返回一个函数对象，但我不知道它们是如何工作的。另外，为什么我们需要侦听器数组--我知道有人解释过，但我正在寻找一个更简单的例子，如果有人解释了这个数组将拥有什么，以及为什么我们在最后取消订阅这些侦听器，我会很感激。
如果有人向我解释了如何调试这段代码，我也会说，我一直在Chrome中得到空值。
最后一个问题，仅仅传递计数器函数如何使它知道它的状态。在还原器函数本身中，我没有看到任何像state = state这样的
浏览 1提问于2019-03-24得票数 3
回答已采纳
顶级App组件在构造函数方法中订阅redux存储：
constructor () {
super()
this.state = store.getState()
store.subscribe(() => {
this.setState(store.getState())
})
}
它将状态的一部分作为道具传递给子组件。如果某个子组件需要更新状态，它只需要分发一个操作：
<button onClick={() => {
store.dispatch({type: 'INCREMENT'}) }
}>increment<
浏览 7提问于2016-11-30得票数 3
回答已采纳
是否可以在redux-saga中同步调用store.dispatch，即在其动作完成运行后返回。例如，下面的代码
const { createStore, applyMiddleware } =require('redux')
const createSagaMiddleware =require('redux-saga').default
const { takeEvery ,take,fork,put}=require('redux-saga/effects')
const {delay} =require('redux-saga&
浏览 0提问于2018-06-22得票数 1
在视频课程：中，我们学习如何编写自己的块，这样我们就可以在操作创建器中进行异步和多个分派调用。我大体上理解这一点。
然而，我很困惑为什么我们在推文中使用store.dispatch而不是next：
const thunk = (store) => (next) => (action) =>
typeof action === 'function' ?
action(store.dispatch) :
next(action);
为什么要使用next而不是store.dispatch，反之亦然？我知道next发展到了下一个中间件，但是如果下一
浏览 0提问于2016-07-15得票数 2
回答已采纳
3回答
请注意，我在redux商店中遇到了一些我不理解的行为。 尽管我的store.dispatch在从js类调用时调用了reducer，但它并没有触发更改。 我的店铺如下： const persistedReducer = persistReducer(persistConfig, reducers);
export default () => {
const store = createStore(
persistedReducer,
composeWithDevTools(
applyMiddleware(thunk),
浏览 19提问于2019-09-14得票数 1
回答已采纳
1回答
如何取消正在运行的store.dispatch(xxx)操作，使底层的http请求也被取消？
我尝试从store.dispatch(new FetchSomeStuffOverHttp())调用中执行.unsubscribe()，并预计底层的http请求也会被取消。
但它将继续运行，即使该操作返回了httpClient的observable：
@Action(FetchStuffOverHttp)
fetchStuffOverHttp({ patchState }: StateContext<AuftragStateModel>) {
return this.httpClien
浏览 1提问于2020-04-02得票数 2
1回答
我只是试着运行一个简单的redux程序，当我使用命令节点索引时，它显示了错误，动作必须是纯对象，下面是我的代码
const redux = require('redux')
const createStore = redux.createStore
const BUY_CAKE = 'BUY_CAKE'
function buyCake () {
return
{
type: BUY_CAKE
}
}
const initialState = {
numOfCakes: 10
}
const reducer = (state = in
浏览 0提问于2020-03-23得票数 0
我已经在action.tsx文件中创建了一个简单的函数，并调用了调度函数，这导致了我的错误。下面是代码
index.txs文件
const store: any = compose(applyMiddleware(thunk))(createStore)(rootReducer);
// store.subscribe(() => console.log("store", store.getState()));
// store.dispatch(miniFaq(store.getState()));
// store.dispatch(getCategoryQues
浏览 0提问于2017-11-03得票数 0
我第一次尝试关注youtube上关于redux的视频，但我不明白为什么我会得到undefined。我已经试着在谷歌上搜索答案，但还是找不到答案。 import { createStore } from 'redux';
//action
const up = () => {
return {
type: 'up'
}
}
const down = () => {
return {
type: 'down'
}
}
//reducer
浏览 3提问于2020-07-02得票数 1
回答已采纳
1回答
我有个小问题：
我的减速器
const initialObject = {
counter: 0,
messages: []
};
function message(state = initialObject, action) {
switch(action.type) {
case actions.ADD_MESSAGE:
return state; // do nothing just return the same state, expect to equal initialObject
default:
浏览 1提问于2016-07-19得票数 1
回答已采纳
为什么我的reducers被调用了两次？请首先找到源代码，下面是来自开发人员工具的截图。 代码： import { createStore } from 'redux';
const initState = {
title: "-",
todos: []
}
function rootReducer(state = initState, action) {
console.log("rootReducer, state=", state, "rootReducer, action=", action)
浏览 32提问于2019-01-02得票数 0
所以我有一个MatDialog盒子，它在关闭时发送一些表单值。然后，我在MatDialogRef提供的afterClosed方法中分派一个操作。 当我手动测试它时，它工作得很好。但是在单元测试时，分派没有被调用，我的测试失败了。 打开对话框时运行的我的代码&关闭时调度操作。 openAddUserDialog() {
this.addUserDialog = this.dialog.open(AddUserDialogComponent, {
width: 'max-content',
height: 'max-content
浏览 31提问于2019-03-21得票数 0
回答已采纳
我真的很困惑于redux中的Object.assign()。
我不明白为什么下面的代码有效。
import { createStore } from "redux"
const userReducer = function (state={}, action) {
switch (action.type) {
case "CHANGE_USER_NAME":
state.name = action.payload
break;
case "CHANGE_USER_AGE":
state.a
浏览 2提问于2017-05-20得票数 0
回答已采纳
1回答
我是新的反应-Redux，我有一个应用程序的所有商店预加载在index.js文件，这是一个入口点，以呈现应用程序。我在页面中有以下代码(其中一部分)。
if(Auth.isUserAuthenticated()){
store.dispatch(getProductCategories());
store.dispatch(getProducts());
store.dispatch(getAuctions());
store.dispatch(getAppSettings());
store.dispatch(getWalletTransactionHistory(
浏览 1提问于2018-10-23得票数 0
回答已采纳
为什么我的store.getState返回未定义的值！我是ReactJS和Redux的新手，这里是我的代码
import {createStore} from 'redux';
const initialState = {
salary: 1000,
}
const reducer = (state=initialState, action) => {
switch (action.type) {
case "ADD":
state = {
salary: state.salary+=action.pay
浏览 0提问于2018-03-11得票数 4
我正在更新前一个开发人员的代码，我不知道为什么我不能这样做，因为代码返回了这个错误： Uncaught (in promise) TypeError: failedCallback is not a function 这是我正在使用的函数： export default {
get(callback, failedCallback) {
axios.get(`/admin/shops`)
.then(response => callback(response.data))
.catch(errors => failedCallbac
浏览 34提问于2020-01-23得票数 0
我已经看到了两种方法:在中，这是丹·阿布拉莫夫( Dan )的一门课程，他正在使用这种方法( )：
const render = () => {
ReactDOM.render(
<Counter
value={store.getState()}
onIncrement={() =>
store.dispatch({
type: 'INCREMENT'
})
}
onDecrement={() =>
浏览 1提问于2018-12-02得票数 3
回答已采纳
2回答
我倾向于redux，我正在尝试创建一个简单的测试应用程序，看看我是否可以将道具从redux传递到响应组件，但它并不像我预期的那样工作。它自己工作的存储很好，但是它没有传递值给我的组件，有人能指出我的代码的问题吗？谢谢。
const randomNum=()=>{...}
const ReduxPropsTest =(props)=>(
<div>
<button onClick={()=>console.log('but this component does not have the props&
浏览 7提问于2017-12-30得票数 3
回答已采纳
我有一个带有客户端过滤的Angular Material Table，在这个表中我从一个服务中检索数据。当我的过滤器对硬编码的数据正常工作时，我收到一个错误:自从我切换到从服务中检索数据以来，无法设置未定义的属性'filterPredicate‘。数据在我的表中正确可见，但我无法对其进行过滤。
export class MessageTableComponent implements OnInit {
datasource: any;
}
ngOnInit() {
this.messageService.getMessageTableData().su
浏览 9提问于2018-12-13得票数 1
回答已采纳
2回答
我正在尝试将xml时事通讯块添加到页面上。由于模板被设置为将块放在主页上，因此我创建了一个cms页面，并对以下代码进行了更改：
<reference name="left">
<block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribe.phtml"/>
</reference>
至：
<reference name="content">
浏览 1提问于2012-12-11得票数 1
我正在查看角度指南的部分，我对页面上一些明显的不一致之处感到困惑。
在最上面，在第一个示例中，它有一个如下所示的示例测试：
it('#getObservableValue should return value from observable',
(done: DoneFn) => {
service.getObservableValue().subscribe(value => {
expect(value).toBe('observable value');
done();
});
});
注意，它在done()块的末
浏览 4提问于2021-01-14得票数 0
回答已采纳
我现在正在学习redux。下面共享的代码是独立于React的，因此React集成是不考虑的。
下面是redux-basics.js，它有还原器、商店、操作和订阅部分。
const redux = require('redux');
const createStore = redux.createStore;
// Note : Store Creation is actually dependent on Reducer Thats why reducer must be created first.
// Reducer
const initialState = { co
浏览 2提问于2019-11-22得票数 0
回答已采纳
1回答
当我用茉莉对我的NGXS商店进行单元测试时，我遇到了意想不到的行为问题。
在这里，我试图测试DeleteAlerts操作：
@Action(DeleteAlerts)
deleteAlerts(ctx: StateContext<AlertStateModel>, action: DeleteAlerts) {
return this.alertService.deleteAlerts(action.alertIds).pipe(
map(response => {
if (response.ok) {
浏览 3提问于2022-06-23得票数 1
const { createStore } = require('redux');
const store = createStore((state={count:0},action) => {
switch(action.type){
case 'INCREMENT':
return {
count: state.count + action.incrementBy
}
case 'DECREMENT':
浏览 12提问于2019-09-30得票数 0
回答已采纳
2回答
我只是在处理Dan关于Egghead视频的redux课程时遇到了一个问题。在分派操作时，ReactDOM呈现似乎不起作用。有什么想法吗？我不知道到底缺了什么。
下面是到代码片段的链接：
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return st
浏览 3提问于2018-05-15得票数 1
回答已采纳
const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST'
const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS'
const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE'
下面的代码显示没有错误，但不起作用。我在这里没有看到任何错误，因为我是新来的Redux。因此，我请求任何人调查这一点，并找出为什么输出没有打印到控制台。我可能在这里错过了一些非常基本的东西。请check.please检查图像的剩余代码。
//
浏览 4提问于2020-06-15得票数 0
回答已采纳
我刚刚开始学习Redux的React JS和have，我认为这是一个很容易回答的问题。我有以下代码：
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from "redux";
//
//----------------------------------------------------------------------------------------
//
const initialState = {
cou
浏览 0提问于2018-02-14得票数 0
1回答
从中间件分派thunk会导致错误
、、、、
我在actions.js文件中定义了一个thunk： export const myThunk = (param1, param2, param3) => {
return dispatch => {
dispatch({type: types.myThunkType})
fetch(`https://mockurl.com?param1=${param1}¶m2=${param2}¶m3=${param3}`)
.then(response => response.json())
.th
浏览 16提问于2020-10-09得票数 0
回答已采纳
2回答
我正在尝试从定义在类中的函数创建redux状态。当我使用以下命令时，会得到Uncaught TypeError: Cannot read property 'type' of undefined： var c = new Counter(0)
counter = c.state
let store = createStore(counter) 但如果我使用function counter(state = 0, action)，它就能正常工作。 import { createStore } from 'redux'
class Counter {
c
浏览 29提问于2019-03-12得票数 0
回答已采纳
我刚开始使用Redux和类型记录。我无法理解为什么存储在尝试使用对象时不想接受还原器
let store = createStore(counter); //error on counter
这是错误的型设置在类型记录或错误的减速机
错误文本：
const计数器：(状态: IPerson，action: any) =>编号\\未定义的无重载匹配此调用。为#2769提供翻译
重载2中的1，‘(还原剂: Reducer<IPerson，any>，增强子？：StoreEnhancer<unknown，unknown> \ undefined)：Store<IPe
浏览 7提问于2022-09-16得票数 -1
回答已采纳
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
1回答
这是用于显示帖子和待办事项的简单的redux应用程序，当我调用调度操作SHOW_POSTS很好，但是SHOW_TODOS返回未定义，为什么？
let initialState = {
todos : ['buy milk', 'write code'],
posts : ['weekly news']
}
function counter(state = initialState, action) {
switch (action.type) {
case 'SHOW
浏览 0提问于2019-01-30得票数 0
回答已采纳
我正在使用订阅中的store.dispatch()函数调用NGXS Action。在调用store.dispatch()函数之前，我需要来自订阅的可观察对象的数据，因此我必须以某种方式等待可观察对象传递数据。我不知道如何修复此代码，因此循环将被防止。你们中有人知道如何正确处理这件事吗？
@Select(NepoState.anlagen) myObserveable$: Observable<Anlage[]>;
ngOnInit(): void {
this.myObserveable$.subscribe((data) => {
this.st
浏览 10提问于2021-05-21得票数 1
回答已采纳
2回答
我试图用最小的例子在ngrx中打印当前状态：
interface AppState {
counter : number;
}
export function Reducer(state : AppState = { counter : 0 }, action : Action) {
console.log(`counter: ${state.counter}`);
return { counter: state.counter + 1 };
}
@Component({
selector: 'app-root',
templateUrl: '.
浏览 0提问于2018-02-13得票数 3
我在看一些对话代码，无意中发现了这一点，我想知道为什么klass = self。据我所知，他们是比我更好的红宝石开发商，一定有一个很好的理由。
为什么他们不叫self.remove_from_cache！(消息“键”，假)？该块是否创建了一个新的作用域，其中self引用了MessageBus类？是否还有其他例子说明您需要在Ruby中创建这种类型的构造，或者这是主要的示例？如果MessageBus.subscribe是MessageBus (例如m_bus.subscribe)的一个实例，那么self会引用块中的m_bus吗？ensure_class_listener是类方法这一事实对此有任何影
浏览 4提问于2014-01-10得票数 6
回答已采纳
我编辑了以下文件，将时事通讯移到页脚而不是侧边栏
app/design/frontend/base/default/layout/newsletter.xml
我更改了以下代码：
<reference name="left">
<block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribe.phtml"/>
</reference>
至：
<refere
浏览 0提问于2012-06-05得票数 2
回答已采纳
当执行某些异步函数时，我们必须使用Observable.Select()。例如,
var timer = Observable.Interval(TimeSpan.FromMilliseconds(100));
timer
.Select(_ => Observable.FromAsync(() => DoSomething(cancellationToken)))
.Concat()
.Subscribe();
在Subscribe()中使用异步函数会有问题。
timer.Subscribe(async tick => await DoSomethi
浏览 5提问于2022-09-11得票数 0
2回答
我在使用APP_INITIALIZER时遇到了问题。一切看起来都很好，函数命中端点和returs并执行解析(True)。问题是，毕竟我只能看到空白的屏幕。控制台中的0错误。以下是代码：
export function initApplication(store: Store<fromRoot.State>){//() => Observable<any> {
return (): Promise<any> => {
return new Promise(resolve => {
store.dispatch(AppAc
浏览 8提问于2022-10-05得票数 0
回答已采纳
我想转换一个函数：
static getCurrentPosition(geo_success, geo_error?, geo_options?)
为了一个可观察的人。
如您所见，函数的第一个参数是成功回调。
RxJS 5 工作在成功回调是最后一个参数的函数上。
有没有一种在static getCurrentPosition(geo_success, geo_error?, geo_options?)上使用static getCurrentPosition(geo_success, geo_error?, geo_options?)的方法？
如果没有，我将手动将函数转换为Promise，类似
浏览 0提问于2017-05-02得票数 4
回答已采纳
const redux = require('redux')
const createStore =redux.createStore
const BUY_CAKE= 'BUY_CAKE'
function buycake(){
return
{type:BUY_CAKE,info:'First Redux Action'}}const initialState ={numOfCakes=10}
const reducer =(state=initialState,action)=>{switch(action.type)
浏览 9提问于2020-05-07得票数 0
1回答
状态变化错误
、、、
我在和Redux一起工作。我在程序中定义了动作和减速器。我想通过onClick事件来改变状态，但它不会改变。
这是我的密码：
import React, { Component, PropTypes } from 'react';
import { createStore } from 'redux';
const display = (state=0, action) => {
switch (action.type){
case 'INCREMENT':
return state+1;
case
浏览 2提问于2015-12-22得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
