Как получить данные с помощью существующего редукционного действия с помощью хуков? - PullRequest
Новая
       10

Как получить данные с помощью существующего редукционного действия с помощью хуков?

0 голосов
/ 11 февраля 2019

Я пытаюсь понять React Hooks.То, что я хочу, это получить данные внутри функционального компонента путем вызова редукционного действия с хуками useEffect.Я знаю, что могу передавать реквизиты в состояние, подобное 

 const [todoList] = useState(props.todoList)

Но какова лучшая практика для извлечения данных с помощью существующих действий с избыточностью?

В компоненте класса React я вызываю этот метод для извлечения данныхв componentDidMount () и Everythink работает. 

import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { ITodo } from './types'
import { getTodos } from '../actions/todoActions'

interface IProps {
    todoList: Array<ITodo>

    getTodos: typeof getTodos
}


const Todos = (props: IProps) => {

    useEffect(() => {
          props.getTodos()
    }, [props.todoList])



    return (
         <div>
             {props.todoList.map((_) => (<div key={_.Id}>{_.Name}</div>))}
         </div>
      )
 }

 const mapStateToProps = (state) => ({
     todoList: state.todo.todoList
 })

 const mapDispatchToProps = {
     getTodos
 }


  export default connect(mapStateToProps, mapDispatchToProps)(ProdRoute)

Я ожидал получить список задач с props и props.getTodos () должен вызываться один раз, как в методе componentDidMount ().Но на самом деле я получаю данные, и getTodos () вызываются снова и снова, но должны вызываться один раз при монтировании компонента

1 Ответ

0 голосов
/ 11 февраля 2019

Позаботьтесь о том, чтобы, передавая [props.todoList] в useEffect, вы ошибочно вызываете постоянное обновление, потому что:

  • useEffect выполняет сравнение экземпляров (===), чтобы узнать,props.todoList изменяется
  • после самого первого рендеринга диспетчер props.getTodos() называется
  • , когда props.todoList будет обновлен, компонент повторно рендерится
  • useEffect вызов получит [props.todoList] в качестве значения, чтобы проверить, нужно ли его повторно запускать или нет
  • props.todoList изменено (было пусто и теперь оно оценено) и props.getTodos() такповторно вызванный
  • redux обновляет todoList с теми же значениями, но изменяя ссылку на массив
  • , компонент повторно отображается, и useEffect проверит, является ли параметр [props.todoList]был обновлен ... но ОБНОВЛЕНО, потому что предыдущий props.todoList отличается от фактического props.todoList, даже если содержимое совпадает

Итак, если вам нужно вызвать props.getTodos() только один раз можно

  • использовать [props.todoList.length] вместо [props.todoList] в качестве второго параметра дляuseEffect вызов
  • использует пустой массив [] в качестве второго параметра для вызова useEffect (см. документы )
...