Reactjs 创建使用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);

function应用程序（{someFunction}）{
返回(
点击我
);
}
常量mapStateToProps=（状态）=>{
返回{
数据：state.data，
};
};
const mapDispatchToProps=（调度）=>{
返回{
something:（）=>dispatch（actionCreator.someFunction（）），
};
};
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；

你就快到了！问题在于：

const-mapDispatchToProps=（调度）=>{
返回{
something:（）=>dispatch（actionCreator.someFunction（）），
};
};

您正在告诉redux将

dispatch

操作映射到名为

{something}

的道具。您需要将道具重命名为

something

，或将地图重命名为

sometfunction

const-mapDispatchToProps=（调度）=>{
返回{
someFunction:（）=>dispatch（actionCreator.someFunction（）），
};
};

你就快到了！问题在于：

const-mapDispatchToProps=（调度）=>{
返回{
something:（）=>dispatch（actionCreator.someFunction（）），
};
};

您正在告诉redux将

dispatch

操作映射到名为

{something}

的道具。您需要将道具重命名为

something

，或将地图重命名为

sometfunction

const-mapDispatchToProps=（调度）=>{
返回{
someFunction:（）=>dispatch（actionCreator.someFunction（）），
};
};

您需要将道具

名称

引用为您在

mapDispatchToProps

中返回的内容，而不是实际操作创建者函数名称。您需要将道具

名称

引用为您在

mapDispatchToProps

中返回的内容，而不是实际操作创建者函数名称。@ItzaMi，对上述内容的一个小补充，使用

对象简写

表示法，

const-mapsdispatchtoprops={someFunction:actionCreator.someFunction}。您可以像这样声明简单的操作。查查更多细节谢谢，@Cehhiro，我不敢相信我没看到。今天是我第一次接触Redux，概念太多了，但我很感谢你的快速回复！我有一个新问题，@Cehhiro。当页面加载时，我如何用axios的初始调用来填充我的状态？@ItzaMi，这是上面的一个小补充，使用
object-shorthand
notation，
const-mapsdispatchtoprops={someFunction:actionCreator.someFunction}。您可以像这样声明简单的操作。查查更多细节谢谢，@Cehhiro，我不敢相信我没看到。今天是我第一次接触Redux，概念太多了，但我很感谢你的快速回复！我有一个新问题，@Cehhiro。当页面加载时，如何使用axios的初始调用填充我的状态？