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