我通过reducer的初始状态获取类别状态项，但是获取redux状态的方式看起来有点混乱和硬编码，因此，我只想获取我自己创建的虚拟JSON数据，并使用json-server包提供，但是，我无法在useEffect钩子的render内部设置初始状态女巫调度redux-saga。有办法解决这个问题吗？

您可以理解代码块下面的操作的故事;

• 减速器块;如果没有我想用空对象更改的初始分派，下面的代码块 *

export const getCategoryReducer = (
    state = {
        category: [
            {
                id: '1',
                name: 'bread',
                url: 'https://via.placeholder.com/210/00FF00?text=1',
                alt: 'bread',
            },
            {
                id: '2',
                name: 'croissant',
                url: 'https://via.placeholder.com/220/00FF00?text=2',
                alt: 'sdfalksdjflkasjdfk',
            },
            {
                id: '3',
                name: 'birthday-cake',
                url: 'https://via.placeholder.com/230/00FF00?text=3',
                alt: 'sdfalksdjflkasjdfk',
            },
        ],
        loading: false,
        err: '',
    },
    action
) => {
    switch (action.type) {
        case LOAD_CATEGORY:
            return {
                ...state,
                loading: true,
            };
        case GET_CATEGORY_SUCCESS:
            return {
                ...state,
                category: action.category,
                loading: false,
            };
        case GET_CATEGORY_FAIL:
            return {
                ...state,
                err: action.message,
                loading: false,
            };
        default:
            return state;
    }
};

注意：initialState的项多于上述代码块

• 我尝试了通过Redux-saga使用UseEffect Hooks的调度操作，但是在页面渲染之前它不会加载json-server bakery类别的项目;*

useEffect(() => {
        dispatch(getCategoryFetch('Bakery'));
    }, []);

这是一个生成器函数，当操作通过时触发，然后从我创建的json-server本地服务器获取数据;

import { call, put, takeLatest } from 'redux-saga/effects';

const categoryFetch = async (category) => {
    const res = await fetch(`http://localhost:3500/categories:`);

    if (!res.ok) {
        throw new Error('Something went wrong');
    }

    const data = await res.json();

    return data[`${category}`];
};

function* getCategory(action) {
    try {
        const category = yield call(categoryFetch, action.payload);
        yield put({ type: GET_CATEGORY_SUCCESS, category });
    } catch (err) {
        yield put({ type: GET_CATEGORY_FAIL, message: err.message });
    }
}

export default function* mySagaCategory() {
    yield takeLatest(LOAD_CATEGORY, getCategory);
}

在下面的代码中呈现动态类别项;

import React, { useCallback, useEffect, useMemo } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import {
    LazyLoadImage,
    LazyLoadComponent,
} from 'react-lazy-load-image-component';
import './ProductContainer.css';

const ProductConatiner = ({ category, err, loading, clickHandler }) => {
    if (loading) {
        document.querySelector('.progress-item').style.display = 'none';
        return (
            <SkeletonTheme className="container">
                <Skeleton
                    color="grey"
                    highlightColor="#AAA"
                    className="handle skeleton"
                    // duration={2.5}
                    // height="55"
                ></Skeleton>
            </SkeletonTheme>
        );
    }

    if (err.length > 0) {
        document.querySelector('.progress-item').style.display = 'none';
        return (
            <h1
                style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    color: 'red',
                }}
            >
                {err + ' reload the page'}
            </h1>
        );
    }

    useEffect(() => {
        document.querySelector('.progress-item').style.display = 'block';
    }, []);

    function quantityHandler() {
        console.log('quantityHandler');
    }

    const Images = useMemo(() => {
        return category.map((el, idx) => {
            return (
                <LazyLoadComponent>
                    <LazyLoadImage
                        delayTime={250}
                        delayMethod="throttle"
                        useIntersectionObserver={true}
                        threshold={500}
                        effect="opacity"
                        key={el.id}
                        src={el.url}
                        alt={el.name}
                    />
                    <input
                        key={idx + 'input'}
                        className="image-input"
                        onChange={quantityHandler}
                        type="number"
                        value="1"
                    ></input>
                    <label>kg</label>
                </LazyLoadComponent>
            );
        });
    }, [category]);

    return (
        <div className="container">
            <button
                onClick={(e) => clickHandler(e.target)}
                className="handle left-handle"
            >
                <div className="text">&#8249;</div>
            </button>
            <div className="slider">{Images}</div>
            {/* <div className="inputs">{quantityItems} </div> */}
            <button
                onClick={(e) => clickHandler(e.target)}
                className="handle right-handle"
            >
                <div className="text">&#8250;</div>
            </button>
        </div>
    );
};

export default ProductConatiner;