Question

我发现这个问题很普遍，但是我没有找到解决方案。

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

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的工作原理，

每次在商店中进行修改（来自化简器）时，将执行所有连接的组件的mapStateToProps函数
如果返回的对象中的一个道具与前一个道具不同（使用了运算符===），则重新渲染该组件，否则不执行任何操作。

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

React Redux：调度时无限循环

1 个答案: