在Redux中,可以使用一个reducer来处理API请求返回的两个对象,可以将它们分离为不同的状态。
首先,我们需要定义两个action类型,用于表示API请求的开始和成功返回:
const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
接下来,我们可以定义一个reducer来处理这两个action类型,并将它们分离为不同的状态:
const initialState = {
loading: false,
error: null,
data1: null,
data2: null
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_DATA_REQUEST:
return {
...state,
loading: true
};
case FETCH_DATA_SUCCESS:
if (action.payload.type === 'data1') {
return {
...state,
loading: false,
data1: action.payload.data
};
} else if (action.payload.type === 'data2') {
return {
...state,
loading: false,
data2: action.payload.data
};
}
return state;
default:
return state;
}
};
export default reducer;
在上面的代码中,我们使用了一个额外的字段type
来指示返回的数据类型,然后根据不同的类型更新相应的状态。
接下来,我们需要创建两个action creator来触发API请求:
const fetchDataRequest = () => ({
type: FETCH_DATA_REQUEST
});
const fetchDataSuccess = (type, data) => ({
type: FETCH_DATA_SUCCESS,
payload: {
type,
data
}
});
最后,在我们的组件中使用Redux来触发API请求和处理返回的数据:
import { useDispatch, useSelector } from 'react-redux';
import { fetchDataRequest, fetchDataSuccess } from './actions';
const App = () => {
const dispatch = useDispatch();
const { loading, error, data1, data2 } = useSelector(state => state);
const fetchData = async () => {
dispatch(fetchDataRequest());
try {
const response1 = await fetch('api/data1');
const data1 = await response1.json();
dispatch(fetchDataSuccess('data1', data1));
const response2 = await fetch('api/data2');
const data2 = await response2.json();
dispatch(fetchDataSuccess('data2', data2));
} catch (error) {
// 处理错误
console.error(error);
}
};
useEffect(() => {
fetchData();
}, []);
if (loading) {
return Loading...;
}
if (error) {
return Error: {error};
}
return (
Data 1: {data1}
Data 2: {data2}
);
};
export default App;
在上面的代码中,我们使用useSelector
来从Redux store中获取状态,使用useDispatch
来触发action。在组件渲染时,我们使用useEffect
来触发API请求,并根据状态渲染不同的UI。
这就是在Redux中如何使用一个reducer来分离API请求返回的两个对象的解决方法。