使用redux和axios获取api数据

54 阅读 0 评论 36 点赞

我是靠谱客的博主危机曲奇，最近开发中收集的这篇文章主要介绍使用redux和axios获取api数据，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

使用redux，我们可以轻松管理状态。因为如果您的组件需要共享和更新状态，那么就需要它。在本篇文章中，我将为您提供完整的redux设置，其中包括带有axios调用api获取数据的示例。

因此，让我们开始我们的redux教程。现在，通过在终端中运行以下代码来创建React项目：

npx create-react-app my-app

现在我们必须安装redux和react-redux。所以打开终端并一个接一个地运行两个命令。

npm install redux


//then


npm install react-redux


//then


npm install --save redux-thunk

在您的myappindex.js文件，添加以下代码。

import {Provider} from 'react-redux';
import store from './store';


ReactDOM.render(
  <React.StrictMode>
  <Provider store={store}>
    <App />
  </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

创建您的myappsrcstoreactionsuserAction.js文件，添加以下代码。

export const UPDATE_USER = 'UPDATE_USER';


const fetch_user = (dispatch) => {
    axios.get('https://reqres.in/api/users')
    .then(res => res.json())
    .then(res => dispatch({type:UPDATE_USER,payload:res.data}))
}


export default fetch_user;

创建您的myappsrcstorereduceruseruserReducer.js文件，添加以下代码。

import {UPDATE_USER} from '../actions/userAction';


const userReducer = (state = {},{type,payload}) => {
    // console.log(actions)
    switch (type) {
      case UPDATE_USER:
        return payload
      default:
        return state;
    }
}


export default userReducer;

创建您的mpappsrcstoreindex.js文件，添加以下代码。

import {applyMiddleware, combineReducers, compose, createStore} from 'redux';
import userReducer from './reducers/userReducer';
import thunk from 'redux-thunk';


const allReducer = combineReducers({users:userReducer});


const InitialStates = {
  users: []
} 


const middleware  = [thunk];


const store = createStore(allReducer,InitialStates,compose(applyMiddleware(...middleware);


export default store;

我们准备在组件中使用redux。现在打开您的App.js文件，添加以下代码。

import fetch_user from './store/actions/userAction';
import { useSelector, useDispatch } from 'react-redux';


function App() {
  const users = useSelector(state => state.users);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1>Redux Tutorial</h1>
      Users: <button onClick={()=>dispatch(fetch_user)}>Fetch Users</button>
      {
        users.length === 0 ? <p>No user found!</p> :
        users.map(user => <p key={user.id}>{user.first_name}</p>) 
      }
    </div>
  );
}
export default App;

这就是使用Axios Api调用的Redux完整指南示例。