示例代码:
// action.js export const fetchData = () => { return async (dispatch) => { try { const response = await fetch('https://jsonplaceholder.typicode.com/todos') const data = await response.json()
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data })
} catch (error) {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message })
}
} }
// reducer.js const initialState = { data: [], loading: false, error: null }
export const dataReducer = (state = initialState, action) => { switch (action.type) { case 'FETCH_DATA': return { ...state, loading: true } case 'FETCH_DATA_SUCCESS': return { ...state, loading: false, data: action.payload } case 'FETCH_DATA_FAILURE': return { ...state, loading: false, error: action.payload } default: return state } }
// component.js import { useDispatch, useSelector } from 'react-redux' import { fetchData } from './action'
const Component = () => { const dispatch = useDispatch() const { data, loading, error } = useSelector(state => state)
useEffect(() => { dispatch(fetchData()) }, [dispatch])
if (loading) { return
if (error) { return
return (