如何在功能性 react-redux 组件中显示获取的数据？

Question

为什么我总是看到“正在加载...”？ 我使用了 redux-toolkit 和 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>
    )
}

reducer Slice 文件是：

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

Answer 1

永远不要使用useState(useSelector。

这意味着“使用第一次渲染时useSelector 的返回值所具有的初始值创建一个组件本地状态”。如果 Redux 状态稍后更改，您将永远看不到它，因为您的 useState 已经初始化，并且那里的任何更改都不会反映在您的 trackersList 变量中。

相反，只需致电useSelector：

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