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

Question

我利用这个周末来学习 Redux，但我不明白如何使用 axios、Redux 和 Redux Thunk 进行 API 调用强>

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

Here's the link to my 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);

Answer 1

你快到了！问题就在这里：

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

您告诉 redux 将 dispatch 操作映射到名为 { something } 的道具。您需要将道具重命名为something 或将地图重命名为someFunction。

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