显示来自同一个减速器的两个不同状态，而不重写状态本身

Question

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

Answer 1

我不清楚你的问题，我认为最好发布你的代码。

但如果我说得对，我认为你正在使用同一个对象来存储这两个对象。你的代码应该是这样的

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