Блог

Почему я всегда вижу «загрузка…»? Я использовал redux-инструментарий и createSlice и извлекал данные с помощью axios. У меня нет никаких проблем с получением данных, и мои данные находятся в состоянии. Моя проблема заключается в отображении извлеченных данных. Мой код компонента таков:

 import React, {useEffect, useState} from 'react';
import { useDispatch, useSelector } from 'react-redux';    
import {fetchTrackers} from 'dashboard/dashboardSlice';    
export default function TrackerManagerDashboard() {
    const [trackersList, setTrackersList] = useState(useSelector(state => state.trackersData));
    const [activeTracker, setActiveTracker] = useState(useSelector(state => state.activeTracker));
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(fetchTrackers);
    }, []);
   if(!trackersList)
        return (
            <div>loading...</div>
        )
    return (
        <div className="TrackerManagerDashboard">
            ...
        </div>
    )
}
 

и файл среза редуктора-это:

 import { createSlice } from '@reduxjs/toolkit'
import * as env from "../../environments";
import axios from 'axios';    
const initialState = {
    trackersData: {},
    activeTracker: {},
}   
const dashboardSlice = createSlice({
    name: 'dashboard',
    initialState,
    reducers: {
        setInitialState(state, action) {
            state.trackersData = action.payload.data;
            state.activeTracker = state.trackersData[Object.keys(state.trackersData)[0]];
        },
    },
})    
export async function fetchTrackers (dispatch, getState) {
    try {
        const { data } = await axios.get(env.APP_URL   '/fetch/trackers.json');
        dispatch(setInitialState({type: 'setInitialState', data }));
    } catch(error) {
        console.log(error);
    }
}    
export const { setInitialState} = dashboardSlice.actions
export default dashboardSlice.reducer
 

Никогда не используйте useState(useSelector .

Это означает «создайте локальное состояние компонента с начальным значением, которое имеет возвращаемое значение useSelector во время первого рендеринга». Если состояние Redux изменится позже, вы никогда его не увидите, так как useState оно уже инициализировано, и любые изменения в нем не будут отражены в вашей trackersList переменной.

Вместо этого просто позвоните useSelector :

 const trackersList = useSelector(state => state.trackersData);
const setActiveTracker = useSelector(state => state.activeTracker);