useReducer 中的 Axios 调用返回承诺而不是数据

Question

我在上下文提供程序中使用 useReducer。我的想法是，我将成为我的状态和调度功能生活的中心。

我正在对数据库进行 axios 调用以获取项目。但是，当我 return 在调度函数中时，它是 returning 一个承诺。我怎样才能 return 来自 axios 调用的数据，以便它存储来自状态调用的数据？

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

在 effect 中进行抓取，然后将数据传递到 reducer。

reducer 是一个纯函数，应该没有副作用。再加上从 reducer 返回的任何数据都被设置为下一个状态。因此，异步函数总是 returns 一个承诺 - 这意味着您正在将 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

useReducer 中的 Axios 调用返回承诺而不是数据

Axios call in useReducer returning promise and not data

reactjs

react-hooks

use-reducer