显示来自同一个 reducer 的 2 个不同状态而没有状态重写自己

Laylaz 发表于 Dev

莱拉兹

我正在构建一个大型应用程序，它从同一个减速器中获取不同的音乐音频和视频，我想从减速器中获取最新的 5 个音乐音频和视频，但它们都在同一个减速器中，我如何在没有的情况下获取这两个数据他们在我使用动作时互相重写？

哈泽姆迪

我没有清楚地了解您的问题，我认为最好发布您的代码。

但是如果我猜对了，我认为您正在使用相同的对象来存储它们。你的代码应该是这样的。

在 reducer.js

const INITIAL_STATE = {
    musicList: [],
    videoList: []
};

export function reducerX(state = INITIAL_STATE, action) {
    switch (action.type) {
        case 'FETCHING_MUSIC_SUCCESS':
            return {
                ...state, musicList: action.payload, loading: false
            };
        case 'FETCHING_MUSIC_LOADING':
            return { ...state, loading: true };

        case 'FETCHING_MUSIC_FAILED':
            return {
                ...state,
                error: 'failed to fetch music',
                loading: false
            };

        case 'FETCHING_VIDEO_SUCCESS':
            return {
                ...state, videoList: action.payload, loading: false
            };
        case 'FETCHING_VIDEO_LOADING':
            return { ...state, loading: true };

        case 'FETCHING_VIDEO_FAILED':
            return {
                ...state,
                error: 'failed to fetch video',
                loading: false
            };
    }
}

在 actionX.js

export function fetchMusic() {
    return dispatch => {
        dispatch({
            type: 'FETCHING_MUSIC_LOADING'
        });
        return API.get('/app/rest/music')
            .then(({ data: music }) =>
                dispatch({
                    type: 'FETCHING_MUSIC_SUCCESS',
                    payload: music
                })
            )
            .catch(error => dispatch({ type: 'FETCHING_MUSIC_FAILED', payload: error }));
    };
}

export function fetchVideo() {
    return dispatch => {
        dispatch({
            type: 'FETCHING_VIDEO_LOADING'
        });
        return API.get('/app/rest/video')
            .then(({ data: video }) =>
                dispatch({
                    type: 'FETCHING_VIDEO_SUCCESS',
                    payload: video
                })
            )
            .catch(error => dispatch({ type: 'FETCHING_VIDEO_FAILED', payload: error }));
    };
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。