React Native + Redux: изменение порядка объектов в хранилище и рендеринге

Question

У меня есть компонент, который использует SortableGrid из response-native-sortable-grid , чтобы визуализировать сетку фотографий, которые можно перетаскивать для изменения порядка изображений. Данные для сетки предоставляются из объекта в моем магазине редуксов. В настоящее время я могу загружать и удалять изображения, но я изо всех сил стараюсь, чтобы изображения переупорядочивались должным образом.

Мой редуктор:

const INITIAL_STATE = {
  user: {
      // ... other fields ommitted
      photos: {"0" : null,
               "1" : null,
               "2" : null,
               "3" : null,
               "4" : null,
               "5" : null},
      }
  }


const userReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
      case 'SETPHOTOS':
         return {
             ...state,
             user: {
                 ...state.user,
                 photos : action.payload,
             }
         }
 }

Компонент, отображаемый вместе с функцией переупорядочения:

 const PhotoUpload = ({ navigation }) => {


    // Redux hooks
    const photos = useSelector(state => state.user.user.photos);
    const dispatch = useDispatch();


    // function to reorder the images
    reorderImages = (itemOrder) => {
      const temp = {}
      const photosCopy = {...photos}

      const array = itemOrder.itemOrder

      for (let index = 0; index < array.length; index++) { 
         let e = array[index]
         let key = e.key
         let order = e.order

         temp[order] = photosCopy[key]
      }

      dispatch(setStorePhotos(temp));
    }


    return (
     <>
        <SortableGrid
        // ... other props ommitted
        onDragRelease       = { (itemOrder) => reorderImages(itemOrder) }
        onDragStart         = { (photo) => console.log("Block: ", photo, " is being dragged now!") } >

        {
            Object.keys(photos).map((key) => 

               <View key={ key } onTap={() => this.pickSingle(true, false, key)} >
                   <Image defaultSource={ require('./default-avatar.png') } source={ getPhoto(key) } />
                   //... add/delete buttons ommitted
               </View>

            )
        }
        </SortableGrid>
     </>
  )
}

Когда освобождение перетаскивается, я вызываю reorderImages, передавая ему Объект, соответствующий порядку изображений в сетке. Это объект itemOrder, который передается в мою функцию после замены двух изображений:

    {"itemOrder": 
    [{"key": "1", "order": 0, "ref": null},
     {"key": "0", "order": 1, "ref": null},
     {"key": "2", "order": 2, "ref": null}, 
     {"key": "3", "order": 3, "ref": null}, 
     {"key": "4", "order": 4, "ref": null}, 
     {"key": "5", "order": 5, "ref": null}]}

Вот как выглядит сетка после загрузки 2 изображений: Журнал после загрузки 2 images:

Photos:
 LOG  0 IMG_0001.JPG
 LOG  1 IMG_0002.JPG
 LOG  2 null
 LOG  3 null
 LOG  4 null
 LOG  5 null

Затем я перетаскиваю и отпускаю первое изображение за вторым, но изображения меняются местами после отпускания. Журнал после замены двух изображений:

Photos:
 LOG  0 IMG_0002.JPG
 LOG  1 IMG_0001.JPG
 LOG  2 null
 LOG  3 null
 LOG  4 null
 LOG  5 null

Порядок изображений в журнале правильный, но сетка находится в том же состоянии, что и рисунок 1. Поэтому, когда я go удаляю первое изображение ( второй должен сдвинуться влево), он просто остается на месте.

Я потратил слишком много времени, пытаясь понять это, поэтому я был бы признателен за любую помощь.