使用 React Redux 和 axios 创建获取数据的操作的困难

我已经在这个周末学习了 Redux，但我不明白如何使用axios、Redux和Redux Thunk进行 API 调用

我已经从这个示例项目中删除了所有内容，因此只有一个操作：我想从中获取数据的操作。

这是我的代码和框的链接

我确定我错过了一些非常简单的东西，但我无法弄清楚它是什么。如果有人可以帮助我或为我指明正确的方向，我将不胜感激

我的减速机

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);