React Redux：调度时的无限循环

Question

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

我正在尝试将用户重定向到 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)

Answer 1

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

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

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

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

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