Почему государство не определено? [Крючки / Перевождь] - PullRequest
Новая
       9

Почему государство не определено? [Крючки / Перевождь]

1 голос
/ 01 февраля 2020

Я пытаюсь использовать 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}],...}}

Есть ли проблемы с диспетчеризацией ?! Добавление загрузки тоже не помогло!

1 Ответ

2 голосов
/ 01 февраля 2020

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
...