React Redux: бесконечный цикл при отправке - PullRequest
Новая
       8

React Redux: бесконечный цикл при отправке

0 голосов
/ 04 сентября 2018

Я заметил, что эта проблема распространена, но я не нашел решения для своего случая.

Я пытаюсь перенаправить пользователя на другой навигатор в реагировать на родной, используя реагировать и использовать избыточность с помощью избыточного числа. Если я отображаю только домашний экран, он работает нормально, но когда я перенаправляю с экрана входа в систему на домашний экран, происходит бесконечный цикл, и я обнаружил, что проблема в функции отправки. 

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)

1 Ответ

0 голосов
/ 04 сентября 2018

Будьте осторожны с mapStateToProps, вам следует выбрать только ту часть магазина, которая вам интересна, иначе у вас могут возникнуть проблемы с производительностью 

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

Небольшое объяснение того, как работает Reaction-redux connect,

  1. каждый раз, когда происходит изменение в магазине (из редукторов), выполняются функции mapStateToProps всех подключенных компонентов
  2. если один объект в возвращаемом объекте отличается от предыдущего (используется оператор ===), то компонент перерисовывается, в противном случае он ничего не делает.

В вашем примере, когда вы выбираете все реквизиты магазина, ваш компонент будет перерисовываться для каждой модификации в магазине

...