React Redux：发送时无限循环

Question

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

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

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)

Answer 1

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

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

关于 react-redux connect 工作原理的一些解释，

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

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

React Redux：发送时无限循环

React Redux: Infinite Loop when dispatch

firebase

reactjs

react-native

redux

redux-thunk