Как использовать actionCreators только с крючками в redux-thunk - PullRequest
Новая
       34

Как использовать actionCreators только с крючками в redux-thunk

0 голосов
/ 20 марта 2020

Я пытаюсь использовать redux-thunk для асинхронного получения данных с использованием перехватов в redux. Я могу заставить все это работать с помощью connect (), но с помощью useSelector / useDispatch я не могу этого понять. codesandbox 

import React, { useEffect, useState } from "react";
import { shallowEqual, useSelector, useDispatch } from "react-redux";
import { getData } from '../Actions/index'

const MissionForm = props => {
  const [send, setSend] = useState(false)
  const dispatch = useDispatch()
  const data = useSelector(
    state => ({
      // missions: state.missions,
      isFetchingData: state.isFetchingData
    }),
    shallowEqual
  );


  useEffect(() => {
    if(send) {
      console.log('im', send)
      dispatch(getData())
    }
  }, [])

  const handleGetData = e => {
    setSend(true)
    e.preventDefault();
  }

  return (
    <>
      {data.isFetchingData ? (
        <div>We are fetching data...</div>
      ) : (
        <button onClick={() => dispatch(getData)}>Get Mission</button>
      )}
    </>
  );
};

export default MissionForm;

Это действие от '../Actions/index'

export const getData = () => dispatch => {
  console.log('step 1 sent')
  dispatch({ GET_DATA });
  console.log('thunky worked')
  axios('https://api.spacexdata.com/v3/missions')
    .then(response => {
      console.log(response)
      dispatch({
        type: UPDATE_MISSIONS,
        missions: response
      })
    })
    .catch(error => console.log(`Couldn't retrieve data.`, error))
};
...