Question

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

我有2种图像和视频的化简功能，如下所示-

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的形状不匹配，我希望我的最终状态形状与传递给reducer函数的initialState的形状一样

Answer 1

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

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。

希望这对您有帮助

Redux商店形状：未获得正确的Redux商店/状态形状

1 个答案: