时间戳

首页 > 解决方案 > 显示来自同一个 reducer 的 2 个不同状态，而状态不会重写

reactjs - 显示来自同一个 reducer 的 2 个不同状态，而状态不会重写

问题描述

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

标签： reactjsreduxreact-redux

解决方案

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

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

在 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 }));
    };
}

推荐阅读