When working with redux you need to use immutable update patterns.
So when you need to insert a specific item or items into an array at a specific index...
Instead of this (or something like this):
case 'SOME_ACTION':
return {
...state,
myArray: [
...state.myArray.slice(0,index),
{name:'Jack'},
...state.myArray.slice(index+1)
]
}
you can do this:
case 'SOME_ACTION':
return {
...state,
myArray: insertIntoArray(myArray,index,{name:'Jack'})
}
As you can see it's just a simple function to insert items into an array and return a new (shallow) copy of the array with the new items.
You can choose to replace the item at index
or you can just move the old item to the right of the new items (index+1
).
Or you can start using immer for all your immutable needs.
npm install insert-items-immutable
const insertIntoArray = require('insert-items-immutable')
//or
import { insertIntoArray } from 'insert-items-immutable'
const original = [1, 2, 3, 4]
// insert char 'A' at index 2 (replacing the 3)
insertIntoArray(original, 2, 'A')
//[1, 2, 'A', 4]
// insert multiple items starting at index 2
insertIntoArray(original, 2, ['A', 'B', 'C'])
//[1, 2, 'A', 'B', 'C', 4]
// insert at index 2 but DON'T replace index element
insertIntoArray(original, 2, 'A', false)
//[1, 2, 'A', 3, 4]
// insert multiple items at index 2 but DON'T replace index element
insertIntoArray(original, 2, ['A', 'B', 'C'], false)
//[1, 2, 'A', 'B', 'C', 3, 4]
ES5 compatible.
insert-items-immutable
is written in TypeScript, auto generated API docs are available.
- Ivan Vlatković
This project is licensed under the MIT License - see the LICENSE file for details