时间戳

首页 > 解决方案 > 难以创建使用 React Redux 和 axios 获取数据的操作

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

标签： reactjsreduxreact-reduxaxiosredux-thunk

解决方案

你快到了！问题在这里：

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

您是在告诉 redux 将dispatch动作映射到名为{ something }. 您需要将道具重命名为something或将地图重命名为someFunction.

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

推荐阅读