Question

我正在尝试通过钩子使用Redux，但是状态始终以空数组而不是取回请求中的数据返回。

动作

export const loading = payload => {
    return {
        type: types.LOADING,
        payload
    }
}

export const getBudget = payload => {
    return {
        type: types.BUDGET_DATA,
        payload
    }
}

export const budgetData = () => {
    return dispatch => {
        dispatch(loading(true))
        const url = `${URL_BUDGET}`
        fetch(url)
            .then(response => dispatch(getBudget(response.data)))
            .catch(err => console.log(err))
        dispatch(loading(false))
    }
}

减速器

import * as types from '../types'

const initialState = {
    budget: []
}

export default (state = initialState, action) => {
    switch (action.types) {
        case types.BUDGET_DATA:
            return {
                ...state,
                budget: action.payload
            }
        default:
            return state
    }
}

组件

const Home = () => {
    useDispatch(budgetData(), categoryData())
    const state = useSelector(state => state.data)
    const budgets = useSelector(state => state.data.budget)
    const categories = useSelector(state => state.data.category)

    //console.log(this.props.dataReducer)
    return (
        <div>
            content
        </div>
    )
}

export default Home

我似乎无法理解为什么提取请求没有得到满足。

我的API具有以下数据格式...

{"meta":{},"data":{"example":[{"timestamp":28378545,"value":5}],...}}

调度是否存在问题？！添加加载也无济于事！

Answer 1

useDispatch返回一个dispatch函数，该函数随后需要被调用。如果您只想在首次渲染组件时执行一次此操作，则可以将其与没有依赖性的useEffect配对：

const Home = () => {
    const dispatch = useDispatch()
    const budgets = useSelector(state => state.data.budget)
    const categories = useSelector(state => state.data.category)

    useEffect(() => {
      dispatch(budgetData())
      dispatch(categoryData())
    }, [])

    return (
        <div>
            content
        </div>
    )
}

export default Home

为什么状态未定义？ [Hooks / Redux]

1 个答案: