Вызовите действие Redux внутри useEffect - PullRequest
Новая
       7

Вызовите действие Redux внутри useEffect

2 голосов
/ 30 апреля 2019

Моя цель здесь - вызвать действие внутри useEffect. 

const ShowTodos = (props) =>{
   useEffect(()=>{
    props.fetchTodos()
   },[])
} 
const mapStateToProps = (state)=>{
  return {
    todos:Object.values(state.todos),
    currentUserId:state.authenticate.userId
  }
}

export default connect(mapStateToProps,{fetchTodos})(ShowTodos)

Это работает нормально, но я получил предупреждение 

React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array  react-hooks/exhaustive-deps.

Но если я собираюсьдобавьте props в качестве второго параметра в мой useEffects, тогда он будет работать бесконечно.

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

const ref = useRef();
  ref.current = props;
  console.log(ref)


  useEffect(()=>{
  ref.current.fetchTodos()
  },[])

Есть ли здесь какой-нибудь другой способ?

Ответы [ 2 ]

3 голосов
/ 30 апреля 2019

Вы должны добавить fetchTodos к зависимостям. 

const ShowTodos = ({ fetchTodos }) => {
  useEffect(() => {
    fetchTodos();
  }, [fetchTodos])
  ...
}

или как это. 

const ShowTodos = (props) => {
  const { fetchTodos } = props;

  useEffect(() => {
    fetchTodos();
  }, [fetchTodos])
  ...
}
2 голосов
/ 30 апреля 2019

Это предупреждение eslint, которое вы получаете, если какая-либо зависимость в useEffect не является частью массива зависимостей.

В вашем случае вы используете props.fetchTodos внутри useEffect, и предупреждение eslint предлагает вам указать props в качестве зависимости, чтобы при изменении реквизитов функция useEffect извлекала обновленные реквизиты из своего закрытия.

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

const ShowTodos = (props) =>{
   const { fetchTodos } = props
   useEffect(()=>{
     fetchTodos()
     // eslint-disable-next-line import/no-extraneous-dependencies
   },[])
} 
const mapStateToProps = (state)=>{
  return {
    todos:Object.values(state.todos),
    currentUserId:state.authenticate.userId
  }
}

export default connect(mapStateToProps,{fetchTodos})(ShowTodos)

Однако вы можете решить проблемубез отключения правила, например 

const ShowTodos = (props) =>{
   const { fetchTodos } = props
   useEffect(()=>{
     fetchTodos()
   },[fetchTodos])
}

Однако я рекомендую вам знать, когда именно следует отключить правило или передать значения в массив зависимостей.

...