为什么 Redux-Toolkit 切片中没有调用我的操作答案

【问题标题】：Why are my actions not being called in Redux-Toolkit slice为什么 Redux-Toolkit 切片中没有调用我的操作
【发布时间】：2020-11-08 10:06:17
【问题描述】：

当从 ImageCard.tsx 组件调度我的 toggleLiked() 函数时，除了最后一个 (toggleLikedAction) 之外，没有任何切片被调用。 likeImageStart 和 likeImageSuccess 都被忽略。为什么？这意味着我的isLoading 状态始终为假，我永远不会收到有关我的 API 调用的挂起状态的反馈，这意味着我永远不会渲染我的微调器 :(

ImageCard.tsx

export function ImageCard({ image }: ImageProp): ReactElement {
    const [liked, setLiked] = useState(image.tags.includes(TAGS.FAV));
    const isLoading = useSelector(imagesAreLoading);

    const dispatch = useDispatch();
    const handleClick = (public_id: string, tag: string) => {
        setLiked(!liked);
        dispatch(toggleLiked(public_id, tag));
    };

    return (
        <div className="card mb-5 portfolio-item">
            <div className="card-image">
                <img className="image" src={image.secure_url} alt="" />
            </div>
            <span onClick={() => handleClick(image.public_id, TAGS.FAV)}>
                {!isLoading && <FontAwesomeIcon icon={liked ? heartSolid : heartOutline} size="lg" color="black" />}
                {isLoading && <img className="spinner" src={Spinner} alt="Loading Spinner" />}
            </span>
        </div>
    );
}

imageSlice.ts

export function toggleLiked(public_id: string, tag: string) {
    
    return async (dispatch) => {
        dispatch(likeImageStart); // HERE

        try {
            const response = await fetch(LIKE_URL, {
                method: 'PUT',
                body: JSON.stringify({ public_id, tag }),
                headers: { 'Content-Type': 'application/json' },
            });
            const data = await response.json();
            if (response.ok) {
                dispatch(likeImageSuccess); // HERE
                dispatch(toggleLikedAction({ public_id, tag })); // HERE
            } else {
                const key = Object.keys(data)[0];
                const message = data[key] ? data[key][0] : response.statusText;
                throw Error(message);
            }
        } catch (error) {
            dispatch(likeImageFailure(error.message));
        }
    };
}

图像切片

const initialState: ImageState = {
    images: [],
    isLoading: false,
    error: '',
};

export const imageSlice = createSlice({
    name: 'image',
    initialState,
    reducers: {
        likeImageStart: (state: ImageState) => {
            state.isLoading = true;
        },
        likeImageSuccess: (state: ImageState) => {
            state.isLoading = false;
            state.error = '';
        },
        likeImageFailure: (state: ImageState, { payload }) => {
            state.isLoading = false;
            state.error = payload;
        },
        toggleLikedAction: (state: ImageState, { payload }) => {
            state.isLoading = false;

            const { public_id, tag } = payload;
            const likedImage = state.images.find((image) => image.public_id === public_id);
            const index = likedImage?.tags.indexOf(tag) || 0;

            index > -1 ? likedImage?.tags.splice(index, 1) : likedImage?.tags.push(tag);
        },
    },
});

【问题讨论】：

标签： reactjs react-redux redux-toolkit

【解决方案1】：

dispatch(likeImageStart) 应该是 dispatch(likeImageStart())。我忘记了调用实际减速器的圆括号。我的错！

【讨论】：