如何在React Redux中更改状态而不更改数据？

Question

I'm aware of "sacred" data is and how dangerous it might get if handled incorrectly; that's why in my app, I'm in a position now where I need to handle a nested long JSON object (that repsents my app state) and it's already a headache to me to get in and out of the nodes/values that need to be amended. I was thinking of including Immutable.js . The question now is: how do I adapt my reducers, actions, state, etc?

Here's an extract of my state when it comes from the MongoDB database:

"shops": [
        {
            "shopId": "5a0c67e9fd3eb67969316cff",
            "picture": "http://placehold.it/150x150",
            "name": "Zipak",
            "email": "leilaware@zipak.com",
            "city": "Rabat",
            "location": {
                "type": "Point",
                "coordinates": [
                    -6.74736,
                    33.81514
                ]
            }
        },
        {
            "shopId": "5a0c6b55fd3eb67969316d9d",
            "picture": "http://placehold.it/150x150",
            "name": "Genekom",
            "email": "leilaware@genekom.com",
            "city": "Rabat",
            "location": {
                "type": "Point",
                "coordinates": [
                    -6.74695,
                    33.81594
                ]
            }
        },
        ...

When a certain action (end-user hits a "Like" button) is triggered, I need to add an attribute to the related Shop object, so it'd become like this:

{
    "shopId": "5a0c67e9fd3eb67969316cff",
    "picture": "http://placehold.it/150x150",
    "name": "Zipak",
    "email": "leilaware@zipak.com",
    "city": "Rabat",
    "liked": true,
    "location": {
        "type": "Point",
        "coordinates": [
            -6.74736,
            33.81514
        ]
    }
},

Now, I manage to add the liked attribute to the individual Shop object, but when I want to change/amend the state (group of all Shop objects), I get the object duplicated (the new one with the liked attribute and the old one). To avoid this mess, I want to handle these operations using Immutable.js to make sure everything is clean and proper.

Where do I start from? Do I convert the state to an Immutable.js Map? List?

Answer 1

Rather than using Immutable.js you can use immutability-helper which has an update function returns the updated value without mutating the original value.

immutability-helper has a syntax inspired from MongoDB so getting used to it shouldn't be very hard for you.

For your case, you can modify your state with the below sample,

import update from 'immutability-helper';

const id = '5a0c67e9fd3eb67969316cff'; // id of the item you need to update
const newState = update(state, {
  shops: {
    $apply: (item) => {
      if (item.shopId !== id) return item
      return {
        ...item,
        liked: true
      }
    }
  }
});

Answer 2

Simply reduce your array of identified shops to an object on fetch success. It's a good practice to do so for any list of unique items to avoid the O(n) complexity of find functions and to mutate your state in a simpler way.

Reduce shops on fetch success in your shops reducer :

shops.reduce((obj, item) => {
    obj[item.id] = item
        return obj;
}, {})

It will then be easy to manipulate your object inside your shops reducer on any action such as a like success :

return { 
    ...state, 
   [action.shopId]: { 
       ...state[action.shopId], 
       liked: true,
    },
}