What is the best way to structure this Store?

Currently, I'm exploring the best strategy for managing lists in my Redux Store. The current structure is as follows:

Store = {
    users: [],
    posts: [],
    lists: [],
}

My concern lies with the 'lists' array. It essentially serves as a storage for paginated lists of specific resources. For example:

lists: [
    {
        id: 'users/43/posts',
        items: [25, 36, 21]
    }
]

The 'id' here corresponds to the URL, allowing the component to easily retrieve and display the appropriate list. However, someone has cautioned me that this may not be the most optimal approach. They suggested an alternative method like so:

users: [{
    id: 2,
    posts: [
       {
           url: 'users/2/posts',
           items: [13, 52, 26],
       }
    ]
}]

I am puzzled about how Redux will determine where to store this list. Would I need to specify the destination within the action arguments?

Your insights would be greatly appreciated.

Answer №1

Indeed, with a little creativity, anything can be made to work! The second method appears more sophisticated, as using URLs as IDs is not recommended. It's best practice for IDs to consist of numbers or a unique sequence of characters and numbers. As your application expands, it becomes necessary to normalize your data by storing IDs in a separate array and converting the array of objects into an object with ID keys.

An illustration from Normalizr:

[{
  id: 1,
  title: 'Some Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}, {
  id: 2,
  title: 'Other Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}]

can be transformed to -

{
  result: [1, 2],
  entities: {
    articles: {
      1: {
        id: 1,
        title: 'Some Article',
        author: 1
      },
      2: {
        id: 2,
        title: 'Other Article',
        author: 1
      }
    }
  }
}

As your application scales, you will likely have multiple reducers and sub-reducers. It will be beneficial to segment specific parts of your state-tree accordingly. This might explain why some recommend organizing your state differently.

Nevertheless, remember that ingenuity can make any approach successful! Best of luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to clear a form after submitting it

Hello all, I have a rather complex form that sends a message successfully with an alert after submission. I'm wondering how I can clear the entire form once it has been submitted to make it simple? Below is my HTML Form and JavaScript code. I would l ...

The steps to triggering a button click after e.preventDefault()

When attempting to prevent a click() event of a button by using preventDefault() after unbinding the button with unbind(), I encountered an issue where it did not work as expected. <script> $("#update2FAButton").on("click",function(e){ e.pre ...

Purge all previous page visits within a specified domain upon user logout using JavaScript

On my website, abc.xyz.com, an individual named A logs in from the login page and is directed to the home page. Then, when user A clicks on the profile button, they are taken to a page displaying their information. User A logs out, prompting the site to ...

Refreshing a Vue JS component

As a beginner in VueJs, I am facing an issue with reloading a component and table when a refresh button is clicked. I have tried using the forceUpdate method and changing keys, but it has not been successful so far. If anyone has any suggestions on how to ...

Can you explain how HTML and JavaScript work together in terms of execution order?

As a newcomer to JavaScript, I'm curious about the execution order of line1, line2, and line3 in my code. My initial assumption was that it would display the paragraph first (line 1), followed by the image (line 2), and then trigger a prompt. However ...

What is the process for removing a Discord user using Node.js?

I've been working on creating a discord bot using node.js, but I'm facing an issue where nothing happens when I try to use a command. The console doesn't log anything except for the bot coming online. const Prefix = '$'; bot.on(&a ...

Regular expression that excludes the initial line in a text box

Can someone assist me in optimizing this small system? It takes a string as input and searches for any words that match the words stored in an array. The system is supposed to display the same string with the new words each time there is a match. However, ...

yii2: Utilizing the power of dynamic calling in widgets

Imagine I have a widget called Widget1; In the view file, I call this widget like so: <?= Widget1::widget() ?> Clicking on an element should trigger a new instance of the widget and execute its JavaScript scripts. However, I am unable to get the s ...

When a button is clicked within ng-repeat, the alert displays an incorrect value

Greetings! Check out my code below for displaying XML data in an HTML table using AngularJS. Each record includes a "Delete Request" button. Here is the HTML code: <div ng-app="myApp" ng-controller="myCtrl"> <table border="1" width=" ...

Tips for utilizing flexbox and React-Native to ensure a cropped image takes up the entire View

I'm trying to create a cropped image that fills the entire screen in my app. Currently, my code looks like this: https://i.stack.imgur.com/9DtAc.png However, I want the small square of Homer eating donuts to occupy the entire screen, similar to the ...

Utilizing loops to generate multiple arrays from a given string

I have a sequence of values: "000111111122222223333333444455556666" Is it possible to utilize three separate loops to generate multiple arrays based on different index ranges? For instance, producing an array from index 0 to 3 ([000]), then creating arr ...

When adding objects with a unique ID to an array, all the objects within the array are being updated with the same value

When the pushValue() function is called, a unique id is generated each time by invoking getGUID(), which is then assigned to objectJson.id and pushed into an array. However, when checking with console.log(), all objects are displayed with the same unique i ...

Tips on using the map and filter methods to narrow down a nested array based on specific object

I am struggling to filter JSON data based on a specific date using Array.Filter and Map. The code I have tried below is not yielding the desired results. Can someone please provide guidance on how to effectively filter JSON data based on a particular date ...

Run the function multiple times by substituting a portion of the argument in a sequential

I am facing a challenge with a method (exampleObj.method) that requires arguments of an object and a function. The code snippet is as follows: exampleObj.method({ name1: 'string1', name2: 'string2', name3: &apos ...

Into the depths we delve, extending beyond to an array of objects?

I have a question about the possibility of extending an array of objects like this: Imagine I have : myObj = [ {"name" : "one", "test" : ["1","2"]}, {"name" : "two", "test" : ["1","2"]} ] And I want to add to it something like - {"name" : ...

How can I locate the quantity of items within an embedded document in MongoDB?

Examining my schema, it appears like this: name: value: p_vars: { name1: {}, name2: {}, } My goal is to determine the number of items in p_vars. Assuming the interpreter is JavaScript, I attempted the following: db.collection.findOne().p_vars.l ...

Is there a way to trigger a modal popup when hovering over a Bootstrap 5 card?

After coming across a handy template online, I decided to implement a modal pop-up feature when hovering over cards using Bootstrap 5. Here's what I have so far: class SavedEpisodes extends Component { $(function() { $('[data-toggle=&qu ...

Enhance your web mapping projects with the dynamic capabilities of Esri Javascript 4

Looking to implement the Service Area feature in Javascript or Angular 2+, but struggling with outdated documentation for version 3.23. Seeking guidance on how to update it to 4.6. Any suggestions? Thank you! (Old link: ) ...

Sending a variable within a PHP page seamlessly without the need for a refresh

I'm encountering an issue with my website where I have a list of products retrieved from a database, each with image and name fields. I want to implement a feature where clicking on a product will display a new box on the webpage containing details su ...

Obtain JSON information from DataTables in a column-by-column manner

I am currently working with a Datatable displayed below <table id="example" class="display" width="100%" cellspacing="0"> <thead> <tr> <th>Name</th> <th>Position</ ...