
Research
/Security News
Contagious Interview Campaign Escalates With 67 Malicious npm Packages and New Malware Loader
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.
redux-create-state
Advanced tools
A utility function for Redux to ease the process of creating a new state object, immutably.
Features
Why do I need this?
As stated on the Redux website:
The key to updating nested data is that every level of nesting must be copied and updated appropriately. This is often a difficult concept for those learning Redux, and there are some specific problems that frequently occur when trying to update nested objects. These lead to accidental direct mutation, and should be avoided.
This function aims to make that problem go away. It works by first creating a shallow clone of the current state (object or array) and then cloning all the nested arrays and objects between the root object/array and the inserted values. So the whole state is not deep cloned automatically, only the necessary arrays and objects are cloned to make the function perform as fast as possible.
$ npm install redux-create-state
import createState from 'redux-create-state';
const state = {
items: [
{id: 1, value: 'foo'},
{id: 2, value: 'bar'}
],
data: ['foo', 'bar']
};
const newState = createState(state,
['items.#1.value', 'newBar'],
['items.#2', {id: 3, value: 'baz'}],
['someNumbers', [1,2,3,4,5]],
['some.long.path', 'someValue'],
['items', (items) => {
items.unshift({id: 0, value: 'first'});
items.push({id: 4, value: 'last'});
return items;
}]
);
console.log(newState);
// Every inner object/array inside the new state
// that was subject to change is cloned.
// The new state data would look like this:
// {
// items: [
// {id: 0, value: 'first'},
// {id: 1, value: 'foo'},
// {id: 2, value: 'newBar'},
// {id: 3, value: 'baz'},
// {id: 4, value: 'last'}
// ],
// data: ['foo', 'bar'],
// someNumbers: [1,2,3,4,5],
// some: {
// long: {
// path: 'someValue'
// }
// }
// }
//
reduxCreateState(state, [...insert])
Parameters
'foo.bar.baz'
). You can also use an array index as path step by prefixing the key with octothorpe (e.g. 'foo.bar.items.#1'
).Returns — array / object
Returns a new state object or array, depending on the provided state.
Here are some examples for common use cases. All the examples assume that you have imported the library as createState
:
import createState from 'redux-create-state';
Update deeply nested object
const state = {a: {b: { c: 'foo' } } };
const newState = createState(state, ['a.b.c', 'bar']);
console.log(newState);
// => {a: {b: { c: 'bar' } } }
Create deeply nested object
const state = {};
const newState = createState(state, ['a.b.c', 'foo']);
console.log(newState);
// => {a: {b: { c: 'foo' } } }
Create a deeply nested object which has an array in it's path
const state = {};
const newState = createState(state, ['a.b.#0.c', 'foo']);
console.log(newState);
// => {a: {b: [ {c: 'foo'} ] } }
Update an existing array item
const state = {items: ['foo', 'bar']};
const newState = createState(state, ['items.#1', 'baz']);
console.log(newState);
// => {items: ['foo', 'baz']}
Append and prepend items to an array
const state = {items: ['foo', 'bar']};
const newState = createState(state, ['items', (items) => {
items.unshift('start');
items.push('end');
return items;
}]);
console.log(newState);
// => {items: ['start', 'foo', 'bar', 'end']}
Remove items from an array
const state = {items: ['foo', 'bar', 'baz']};
const newState = createState(state, ['items', (items) => {
items.splice(1, 1);
return items;
}]);
console.log(newState);
// => {items: ['foo', 'baz']}
Do multiple modifications
const state = {items: ['foo', 'bar']};
const newState = createState(state,
['items.#1', 'baz'],
['foo.bar', 'baz']
);
console.log(newState);
// => {
// items: ['foo', 'baz'],
// foo: {bar: 'baz'}
// }
As always, there's a swarm of awesome alternatives for you to pick from.
Copyright © 2017 Niklas Rämö. Licensed under the MIT license.
FAQs
Create new Redux state immutably
We found that redux-create-state demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.