解决方法如下:
npm install axios react-redux redux
然后,你可以在你的代码中导入它们:
import axios from 'axios';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUsers } from './actions/userActions';
store.js
文件,并添加以下代码:import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;
在这个例子中,我们使用了redux-thunk中间件来处理异步操作。
actions/userActions.js
文件,并添加以下代码:import axios from 'axios';
export const fetchUsers = () => async (dispatch) => {
try {
dispatch({ type: 'FETCH_USERS_REQUEST' });
const response = await axios.get('https://api.example.com/users');
const data = response.data;
dispatch({ type: 'FETCH_USERS_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_USERS_FAILURE', payload: error.message });
}
};
在这个例子中,我们使用了Axios库来发起一个GET请求,并根据请求的结果分发相应的action。
接着,在你的项目中创建一个reducers/userReducer.js
文件,并添加以下代码:
const initialState = {
users: [],
loading: false,
error: null,
};
const userReducer = (state = initialState, action) => {
switch (action.type) {
case 'FETCH_USERS_REQUEST':
return {
...state,
loading: true,
error: null,
};
case 'FETCH_USERS_SUCCESS':
return {
...state,
users: action.payload,
loading: false,
error: null,
};
case 'FETCH_USERS_FAILURE':
return {
...state,
loading: false,
error: action.payload,
};
default:
return state;
}
};
export default userReducer;
在这个例子中,我们定义了一个用户reducer,根据不同的action来更新state。
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUsers } from './actions/userActions';
const UserList = () => {
const dispatch = useDispatch();
const { users, loading, error } = useSelector((state) => state.user);
useEffect(() => {
dispatch(fetchUsers());
}, [dispatch]);
if (loading) {
return Loading...;
}
if (error) {
return Error: {error};
}
return (
User List
{users.map((user) => (
{user.name}
))}
);
};
export default UserList;
在这个例子中,我们使用了useDispatch
和useSelector
来分发action并获取Redux store中的数据。我们还使用了useEffect
来在组件挂载时发起异步请求。
这就是使用Axios、useEffect和Redux的基本解决方法。当你运行你的应用程序时,它将发起一个GET请求来获取用户列表,并将它们显示在页面上。