How to swap array elements unchanged in a Redux reducer?

Question

The corresponding state of Redux consists of an array of objects representing the layers.

Example:

let state = [
    { id: 1 }, { id: 2 }, { id: 3 }
]

I have a Redux action called moveLayerIndex:

actions.js

export const moveLayerIndex = (id, destinationIndex) => ({
    type: MOVE_LAYER_INDEX,
    id,
    destinationIndex
})

I would like the reducer to handle the action, replacing the position of the elements in the array.

<strong> reducers /layers.js

const layers = (state=[], action) => {
    switch(action.type) {
        case 'MOVE_LAYER_INDEX':

/ * What should I do here to do the next test pass * /

        default:
         return state
    }
}

The test verifies that the Redux reducer changes the elements of the array in the same way.

Deep freezing is used to check the initial state, which did not mutate in any way.

How to make this test pass?

Test / reducers / index.js

import { expect } from 'chai'
import deepFreeze from'deep-freeze'

const id=1
const destinationIndex=1

 it('move position of layer', () => {
    const action = actions.moveLayerIndex(id, destinationIndex)
    const initialState = [
        {
          id: 1
        },
        {
          id: 2
        },
        {
          id: 3
        }
    ]
    const expectedState = [
        {
          id: 2
        },
        {
          id: 1
        },
        {
          id: 3
        }
    ]
    deepFreeze(initialState)
    expect(layers(initialState, action)).to.eql(expectedState)
 })

Answer 1

, , , , .

, , :

function immutablySwapItems(items, firstIndex, secondIndex) {
    // Constant reference - we can still modify the array itself
    const results= items.slice();
    const firstItem = items[firstIndex];
    results[firstIndex] = items[secondIndex];
    results[secondIndex] = firstItem;

    return results;
}

Redux - , .

Answer 2

map, :

function immutablySwapItems(items, firstIndex, secondIndex) {
    return items.map(function(element, index) {
        if (index === firstIndex) return items[secondIndex];
        else if (index === secondIndex) return items[firstIndex];
        else return element;
    }
}

ES2015:

const immutablySwapItems = (items, firstIndex, secondIndex) =>
  items.map(
    (element, index) =>
      index === firstIndex
        ? items[secondIndex]
        : index === secondIndex
        ? items[firstIndex]
        : element
  )

Answer 3

ES2015

function (items, index, replacement) {
    return [...items.slice(0, index), replacement, ...items.slice(index + 1)];
}