Форма магазина Redux: неправильная форма магазина / состояния редукса

Question

Я не могу получить правильную форму хранилища / состояния избыточности.

У меня есть 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;
  }
}

Root редуктор -

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

Конечное состояние приращения, которое я получаю, не соответствует форме initialState, я ожидаю, что моя форма окончательного состояния будет такой же, как в 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.

Надеюсь, это поможет