Redux 存储形状：没有得到正确的 redux 存储/状态形状

Question

我无法获得正确的 redux 存储/状态形状。

我有 2 个用于图像和视频的 reducer 函数，如下所示 -

imageReducer.js -

const initialState = {
  images:{
    imageArray:[],
    selectedImage:{}
  }
}

export default function (state = initialState,action) {
  switch(action.type) {
    case types.FLICKR_IMAGES_SUCCESS:
      return {
        ...state, 
        images: {
        ...state.images.imageArray,...action.images
      }
    }
    case types.SELECTED_IMAGE:
      return {
        ...state,
        images: {
          ...state.images.selectedImage,...action.image
        }
      }
      default:
        return state;
  }
}

videoReducer.js -

const initialState = {
  videos:{
    videoArray:[],
    selectedVideo:{}
  }
}

export default function (state = initialState,action) {
  switch(action.type) {
    case types.SHUTTER_VIDEOS_SUCCESS:
      return {
        ...state, 
        videos: {
        ...state.videos.videoArray,...action.videos
      }
    }
    case types.SELECTED_VIDEO:
      return {
        ...state,
        images: {
          ...state.videos.selectedVideo,...action.video
        }
      }
       default:
      return state;
  }
}

根减速器 -

import { combineReducers } from 'redux';
import img from './imageReducer';
import vid from './videoReducer';

// Combines all reducers to a single reducer function
const rootReducer = combineReducers({
  img, 
  vid
});

我得到的最终 redux 状态与 initialState 的形状不匹配，我希望我的最终状态形状与传递给减速器函数的 initialState 一样

Answer 1

您的 reducer 在返回数据时实际上创建了不同的结构。将减速器更改为此应该可以解决问题。

const initialState = {
  images:{
    imageArray:[],
    selectedImage:{}
  }
}

export default function (state = initialState,action) {
  switch(action.type) {
    case types.FLICKR_IMAGES_SUCCESS:
      return { 
        images: {
        ...state.images,
        imageArray: [
            ...state.images.imageArray,...action.images
         ]
      }
    }
case types.SELECTED_IMAGE:
      return {
        images: {
          ...state.images,
          selectedImage: {
            ...state.images.selectedImage, ...action.image
          }

        }
      }
      default:
        return state;
   }  
  }
}

视频缩减器也是如此。另外，我认为最好从状态对象中删除images 和videos 键，这样您就可以调用props.img.imageArray 而不是调用props.img.images.imageArray。

希望对你有帮助