Axios 調用 useReducer 返回承諾而不是數據

Question

我在我的上下文提供程序中使用 useReducer。 這個想法是我將成為我的狀態和調度功能的中心位置。

我正在對一個數據庫進行 axios 調用以獲取項目。 但是，當我在調度函數中返回時，它返回了一個承諾。 如何從 axios 調用返回數據，以便將調用中的數據存儲在 state 中？

const initState = []

const projectsReducer = async (state, action) => {
    switch(action.type) {
        case 'FETCH_PROJECTS':
            const req = await axios.get('/api/fetch_projects')
            const { data } = req
            return {...state, data}
            
        default: 
            return state

    }
}

useEffect(() => {
    const initFetch = () => {
        projectsDispatch({type: 'FETCH_PROJECTS'})
    }
    initFetch()
}, [])


const [projects, projectsDispatch] = useReducer(projectsReducer, initState)

Answer 1

在效果中進行提取，然后將數據傳遞到減速器中。

reducer 是一個純函數，應該沒有副作用。 加上從減速器返回的任何數據都設置為下一個狀態。 因此，異步函數總是返回一個承諾——這意味着您將projects的狀態設置為數據的承諾。

如果您按如下方式重構代碼，它應該可以工作。

const initState = {data: []};

const projectsReducer = (state, action) => {
    switch(action.type) {
        case 'FETCH_PROJECTS':
            const { data } = action.payload;
            return {...state, data}
            
        default: 
            return state

    }
}
const [projects, projectsDispatch] = useReducer(projectsReducer, initState)

useEffect(() => {
    const initFetch = async () => {
        const req = await axios.get('/api/fetch_projects')
        projectsDispatch({type: 'FETCH_PROJECTS', payload: {data: req.data}})
    }
    initFetch()
}, [])
// data is in projects.data;

雖然因為它更簡單，但你並不真正需要減速器：

const [projects, setProjects] = useState([]);

useEffect(() => {
    const initFetch = async () => {
        const req = await axios.get('/api/fetch_projects')
        setProjects(req.data);
    }
    initFetch()
}, [])
// data is in projects