React Redux:调度时无限循环 [英] React Redux: Infinite Loop when dispatch

问题描述

我发现这个问题很常见，但我没有找到适合我的案例的解决方案.

I observed that this problem is common, but I didn't find a solution for my case.

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

I'm trying to redirect the user to another navigator in react native, using react and redux with redux-thunk. If I display just Home screen it works fine, but when I'm redirecting from SignIn screen to Home, it goes into an infinite loop, I found the problem is in the dispatch function.

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)

推荐答案

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

Be careful with mapStateToProps, you should only select the part of the store you're interested in, otherwise performance problems could occur

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

稍微解释一下 react-redux connect 是如何工作的，

A little explanation how react-redux connect works,

1. 每次 store 中有修改(来自reducers)，所有连接组件的mapStateToProps 函数都会被执行
2. 如果返回对象中的一个 prop 与前一个 prop 不同(使用运算符 ===)，则重新渲染组件，否则什么都不做.

1. each time there is a modification in the store (from the reducers), the mapStateToProps functions of all the connected components are executed
2. if the one prop in the returned object is different from the previous one (the operator === is used) then the component is re-rendered otherwise it does nothing.

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

In your example, as you select all the props of the store, your component will be re-rendered for each modification in the store

这篇关于React Redux:调度时无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！