React Redux：调度时的无限循环

Posted 2023-02-19

【中文标题】React Redux：调度时的无限循环

【英文标题】：React Redux: Infinite Loop when dispatch

【发布时间】：2019-02-09 18:22:08

【问题描述】：

我观察到这个问题很常见，但我没有找到适合我的情况的解决方案。

我正在尝试将用户重定向到 react native 中的另一个导航器，使用 react 和 redux 以及 redux-thunk。如果我只显示主屏幕，它工作正常，但是当我从登录屏幕重定向到主屏幕时，它进入了一个无限循环，我发现问题出在调度函数中。

import 
  FETCHING_CATEGORIES_REQUEST,
  FETCHING_CATEGORIES_SUCCESS,
  FETCHING_CATEGORIES_FAILURE,
 from "../types"

import  Categories  from "../../services/firebase"

export const fetchingCategoriesRequest = () => (
  type: FETCHING_CATEGORIES_REQUEST,
)

export const fetchingCategoriesSuccess = data => (
  type: FETCHING_CATEGORIES_SUCCESS,
  payload: data,
)

export const fetchingCategoriesFailure = error => (
  type: FETCHING_CATEGORIES_FAILURE,
  payload: error,
)

export const fetchCategories = () => 
  return async dispatch => 
    dispatch(fetchingCategoriesRequest())
    Categories.get()
      .then(data => dispatch(fetchingCategoriesSuccess(data)))
      .catch(error => dispatch(fetchingCategoriesFailure(error)))
  

路由

import  createSwitchNavigator  from "react-navigation"

import PrivateNavigator from "./private"
import PublicNavigator from "./public"

const Navigator = (signedIn = false) => 
  return createSwitchNavigator(
    
      Private: 
        screen: PrivateNavigator,
      ,
      Public: 
        screen: PublicNavigator,
      ,
    ,
    
      initialRouteName: signedIn ? "Private" : "Public",
    ,
  )


export default Navigator

重定向

import React from "react"
import  Spinner  from "native-base"
import  connect  from "react-redux"
import Navigator from "../navigation"

class AppContainer extends React.Component<any, any> 
  render() 
    const  isLogged, loading  = this.props.auth

    const Layout = Navigator(isLogged)
    return loading ? <Spinner /> : <Layout />
  


const mapStateToProps = state => 
  return 
    ...state,
  


export default connect(
  mapStateToProps,
  ,
)(AppContainer)

【问题讨论】：

redirect 在哪里？

我已经更新了帖子

哼不明白为什么 threre 是一个无限循环，但你的 mapStateToProps 函数可能会更好 -> const mapStateToProps = state => state.auth。当前使用您的代码，将为商店中的每个修改执行渲染方法（即使 auth 尚未更改）

猜猜，它解决了我的问题，谢谢：D

你确定是我弄错了，是const mapStateToProps = state => (auth: state.auth)而不是const mapStateToProps = state => state.auth

【参考方案1】：

小心mapStateToProps，你应该只选择你感兴趣的商店部分，否则可能会出现性能问题

const mapStateToProps = state => (auth: state.auth);

稍微解释一下 react-redux connect 的工作原理，

每次在 store 中有修改（来自 reducers），都会执行所有连接组件的 mapStateToProps 函数 如果返回对象中的 one prop 与前一个不同（使用运算符 ===），则重新渲染组件，否则不执行任何操作。

在您的示例中，当您选择商店的所有道具时，您的组件将针对商店中的每次修改重新渲染

【讨论】：

这回答了大部分问题，但如果你也更新了 hooks 的答案，那就太好了，第二次我明白了，关于 react-hooks

只是为了回答上面的问题，useSelector 很可能包装了mapStateToProps，这样您就不必编写更高阶的组件。我从未使用过它，但我认为这就是它的工作原理:)