Блог

Я потратил эти выходные на изучение Redux, но я не могу понять, как я могу выполнять вызовы API, используя axios, Redux и Redux Thunk

Я удалил все из этого примера проекта, так что осталось только одно действие: то, из которого я хочу получить свои данные.

Вот ссылка на мой codesandbox

Я уверен, что мне не хватает чего-то невероятно простого, но я не могу понять, что это. Если бы кто-нибудь мог мне помочь или указать правильное направление, я был бы очень признателен

Мой редуктор

 const initialState = {
  data: [],
};

const reducer = (state = initialState, action) => {
  const newState = { ...state };

  switch (action.type) {
    case 'SOMETHING':
      newState.data = action.data;
      console.log(newState.data);
      break;
    default:
      newState;
  }
  return newState;
};

export default reducer;
  

Мое действие

 import axios from 'axios';

export function someFunction() {
  return (dispatch) => {
    axios.get('https://api.pokemontcg.io/v1/types').then((response) => {
      dispatch({ type: 'SOMETHING', data: response.data });
    });
  };
}
  

Мой App.js

 function App({ someFunction }) {
  return (
    <div className="App">
      <button onClick={someFunction}>Click Me</button>
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    data: state.data,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    something: () => dispatch(actionCreator.someFunction()),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
  

Вы были почти на месте! Проблемы здесь:

 const mapDispatchToProps = (dispatch) => {
  return {
    something: () => dispatch(actionCreator.someFunction()),
  };
};
  

Вы предлагаете redux сопоставить dispatch действия с вызываемыми реквизитами { something } . Вам нужно либо переименовать prop в something , либо переименовать map в someFunction .

 const mapDispatchToProps = (dispatch) => {
  return {
    someFunction: () => dispatch(actionCreator.someFunction()),
  };
};