Hackernoon logoRedux Patterns: Add/Edit/Remove Objects in an Array by@justintulk

Redux Patterns: Add/Edit/Remove Objects in an Array

image
Justin Tulk Hacker Noon profile picture

@justintulkJustin Tulk

Senior Engineer

Update: In practice, I’m simplifying this structure more and more. Not because it’s bad, but because it’s frequently more solution than I need. Read more:

I wrote a post the other day about how to implement a Redux-flavored store and reducer in a single React component without actually using Redux. I didn’t code out the logic in the post, but when I was tinkering in JSBin I used a pattern for updating objects in an array that looks like this:

The problem with this method is that mapping the entire array for every update will see performance degradation as the array size grows. Also, we have to do some extra work to make sure that we don’t inadvertantly end up with more than one copy of each object in the array.

Hash Tables

What if we stored the data using a hash table instead of an array? Hash tables can be used to map items from an array into an object using key-value pairs such that duplicates are easily avoided and lookup performance is improved. However, certain array properties (such as length) will not be as readily accessible. To get around that limitation we’ll keep two properties in state, one will be an array of hashes, and the other will be a hash table of each individual object.

const initialState = {
byId: [],
byHash: {}
}

Every time we add, edit, or update an object via our reducer we’ll perform two actions: one will update the array (if necesssary) and the other will update the hash table.

Presto: a much more efficient reducer when operating at scale. If we were using this in a React view to build out a list of subcomponents, we could leverage both parts of the state object to map out the subcomponents and then populate them.

// assuming Redux passes in the state object as this.props.data
{this.props.data.byId.map((item, index) => (
<div key={index}>
{this.props.data.byHash[item].content.title}
</div>
)}

In an actual Redux example, the state object could be built by combining two separate reducers to act independently on the byHash and byId properties of the state object to simply the logic.

Full disclosure: I’m not sure that this the optimum way to solve this problem. If you’ve got a better solution, or can link to anything related, please share.

Note: The reducer logic should make sure that state is always being returned as a new object to ensure a view update in React/Redux. I’m not testing this code in a view while I write this blog post, so there may be a syntax error or two, or maybe there is just some unnecessary logic. Feel free to comment w/ suggested improvements.

Related

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.