Combining SubArray Properties in a Redux Reducer Array by Matching Objects

Question

Combining SubArray Properties in a Redux Reducer Array by Matching Objects

I am currently developing a unique keyword generation tool for my application. The tool takes a list of cities and organizes them into keyword groups based on specific categories.

So far, I have experimented with different methods such as using .map on the state and .find to identify matches. However, I am encountering difficulties in properly merging the data to achieve the desired end result. Any guidance or suggestions on how to accomplish this would be greatly appreciated.

const generatedKeywords = (state = [], action) => {
switch (action.type) {
    case types.KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS: {
      return [...state, ...action.payload];
    }
    default: {
      return state;
    }
  }
};

When triggering an action, the input looks something like:

[
   { 
     cityName: "Los Angeles", 
     keywords: ["Los Angeles HVAC Repair", "HVAC Installation Los Angeles"]
   }, 
   {
     cityName: "Sacramento", 
     keywords: ["Sacramento HVAC Repair", "HVAC Installation Sacramento"]
    }
]

The initial action works fine, but subsequent actions do not merge objects with the same cityName. Instead, they produce:

[
    {
        "cityName": "Los Angeles",
        "keywords": [
            [
                "Los Angeles Roofing",
                "Roofers in Los Angeles"
            ]
        ]
    },
    {
        "cityName": "Sacramento",
        "keywords"&: [
            [
                "Sacramento Roofing",
                "Roofers in Sacramento"
            ]
        ]
    },
    ...
]

Desired output is shown below:

[
    {
        "cityName": "Los Angeles",
        "keywords": [            
                "Los Angeles Roofing",
                "Roofers in Los Angeles",
                "HVAC Company in Los Angeles",
                "Los Angeles HVAC Inspection"
        ]
    },
    {
        "cityName": "Sacramento",
        "keywords": [            
                "Sacramento Roofing",
                "Roofers in Sacramento",
                "HVAC Company in Sacramento",
                "Sacramento HVAC Inspection"            
        ]
    }
]

javascript arrays redux react-redux

Answer 1

Answer №1

Currently, the process involves concatenating the new state with the old state array. Instead, it would be more efficient to perform a merge operation.

If the state pertains to single entries for specific cities or keywords, using Objects instead of Arrays might simplify the storage. However, this choice largely depends on personal preference.

To demonstrate, consider the following two snippets.

1. State represented as an Array with merge logic in the reducer

Create a temporary state containing a Map for all cities and a Set for all keywords.
Iterate over the new entries and either merge them with existing state or add them as new entries.
Finally, transform the data back into the desired array format.

Note: For smaller states and payloads, utilizing array methods like .includes and .find can help identify duplicate entries for merging.

const types = { KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS: 1 };

const generatedKeywords = (state = [], action = {}) => {
  switch (action.type) {
    case types.KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS: {
      const stateMap = new Map(
        state.map(s => [ s.cityName, new Set(s.keywords) ])
      );
      
      for (const { cityName, keywords } of action.payload) {
        if (stateMap.has(cityName)) {
          const wordSet = stateMap.get(cityName);
          keywords.flat().forEach(word => { wordSet.add(word); });
        } else {
          stateMap.set(cityName, new Set(...keywords));
        }
      }
      
      return Array
        .from(stateMap.entries())
        .map(([ cityName, keywords ]) => ({ cityName, keywords: Array.from(keywords) }));
    }
    default: {
      return state;
    }
  }
};

let state = generatedKeywords();
state = generatedKeywords(state, { type: types.KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS, payload: data1() })
state = generatedKeywords(state, { type: types.KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS, payload: data2() })

console.log(state);

// DATA
function data1() { return [
    {
        "cityName": "Los Angeles",
        "keywords": [
            [
                "Los Angeles Roofing",
                "Roofers in Los Angeles"
            ]
        ]
    },
    {
        "cityName": "Sacramento",
        "keywords": [
            [
                "Sacramento Roofing",
                "Roofers in Sacramento"
            ]
        ]
    }
];}

function data2() { return [
    {
        "cityName": "Los Angeles",
        "keywords": [
            [
                "HVAC Company in Los Angeles",
                "Los Angeles HVAC Inspection"
            ]
        ]
    },
    {
        "cityName": "Sacramento",
        "keywords": [
            [
                "HVAC Company in Sacramento",
                "Sacramento HVAC Inspection"
            ]
        ]
    }
];}

2. State represented as an Object

This state format ensures there is only one entry per city. A helper function is essential to avoid adding duplicate keywords.

Spread the old state,
Add an entry for each city in the payload,
When creating these entries, ensure to merge any existing keywords (state[cityName]?.keywords)

const types = { KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS: 1 };
const uniques = xs => Array.from(new Set(xs));

const generatedKeywords = (state = {}, action = {}) => {
  switch (action.type) {
    case types.KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS: {
      return {
        ...state,
        ...Object.fromEntries(action.payload.map(
          ({ cityName, keywords }) => [ 
            cityName,
            {
              cityName,
              keywords: uniques(
                keywords.flat().concat(
                  state[cityName]?.keywords ?? []
                )
              )
            }
          ]))
      }
    }
    default: {
      return state;
    }
  }
};

let state = generatedKeywords();
state = generatedKeywords(state, { type: types.KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS, payload: data1() })
state = generatedKeywords(state, { type: types.KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS, payload: data2() })

console.log(Object.values(state));

// DATA
function data1() { return [
    {
        "cityName": "Los Angeles",
        "keywords": [
            [
                "Los Angeles Roofing",
                "Roofers in Los Angeles"
            ]
        ]
    },
    {
        "cityName": "Sacramento",
        "keywords": [
            [
                "Sacramento Roofing",
                "Roofers in Sacramento"
            ]
        ]
    }
];}

function data2() { return [
    {
        "cityName": "Los Angeles",
        "keywords": [
            [
                "HVAC Company in Los Angeles",
                "Los Angeles HVAC Inspection"
            ]
        ]
    },
    {
        "cityName": "Sacramento",
        "keywords": [
            [
                "HVAC Company in Sacramento",
                "Sacramento HVAC Inspection"
            ]
        ]
    }
];}

Answer 2

Currently, the process involves concatenating the new state with the old state array. Instead, it would be more efficient to perform a merge operation.

If the state pertains to single entries for specific cities or keywords, using Objects instead of Arrays might simplify the storage. However, this choice largely depends on personal preference.

To demonstrate, consider the following two snippets.

1. State represented as an Array with merge logic in the reducer

Create a temporary state containing a Map for all cities and a Set for all keywords.
Iterate over the new entries and either merge them with existing state or add them as new entries.
Finally, transform the data back into the desired array format.

Note: For smaller states and payloads, utilizing array methods like .includes and .find can help identify duplicate entries for merging.

const types = { KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS: 1 };

const generatedKeywords = (state = [], action = {}) => {
  switch (action.type) {
    case types.KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS: {
      const stateMap = new Map(
        state.map(s => [ s.cityName, new Set(s.keywords) ])
      );
      
      for (const { cityName, keywords } of action.payload) {
        if (stateMap.has(cityName)) {
          const wordSet = stateMap.get(cityName);
          keywords.flat().forEach(word => { wordSet.add(word); });
        } else {
          stateMap.set(cityName, new Set(...keywords));
        }
      }
      
      return Array
        .from(stateMap.entries())
        .map(([ cityName, keywords ]) => ({ cityName, keywords: Array.from(keywords) }));
    }
    default: {
      return state;
    }
  }
};

let state = generatedKeywords();
state = generatedKeywords(state, { type: types.KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS, payload: data1() })
state = generatedKeywords(state, { type: types.KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS, payload: data2() })

console.log(state);

// DATA
function data1() { return [
    {
        "cityName": "Los Angeles",
        "keywords": [
            [
                "Los Angeles Roofing",
                "Roofers in Los Angeles"
            ]
        ]
    },
    {
        "cityName": "Sacramento",
        "keywords": [
            [
                "Sacramento Roofing",
                "Roofers in Sacramento"
            ]
        ]
    }
];}

function data2() { return [
    {
        "cityName": "Los Angeles",
        "keywords": [
            [
                "HVAC Company in Los Angeles",
                "Los Angeles HVAC Inspection"
            ]
        ]
    },
    {
        "cityName": "Sacramento",
        "keywords": [
            [
                "HVAC Company in Sacramento",
                "Sacramento HVAC Inspection"
            ]
        ]
    }
];}

2. State represented as an Object

This state format ensures there is only one entry per city. A helper function is essential to avoid adding duplicate keywords.

Spread the old state,
Add an entry for each city in the payload,
When creating these entries, ensure to merge any existing keywords (state[cityName]?.keywords)

const types = { KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS: 1 };
const uniques = xs => Array.from(new Set(xs));

const generatedKeywords = (state = {}, action = {}) => {
  switch (action.type) {
    case types.KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS: {
      return {
        ...state,
        ...Object.fromEntries(action.payload.map(
          ({ cityName, keywords }) => [ 
            cityName,
            {
              cityName,
              keywords: uniques(
                keywords.flat().concat(
                  state[cityName]?.keywords ?? []
                )
              )
            }
          ]))
      }
    }
    default: {
      return state;
    }
  }
};

let state = generatedKeywords();
state = generatedKeywords(state, { type: types.KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS, payload: data1() })
state = generatedKeywords(state, { type: types.KEYWORD_GENERATOR_TOOL_ADD_GENERATED_KEYWORDS, payload: data2() })

console.log(Object.values(state));

// DATA
function data1() { return [
    {
        "cityName": "Los Angeles",
        "keywords": [
            [
                "Los Angeles Roofing",
                "Roofers in Los Angeles"
            ]
        ]
    },
    {
        "cityName": "Sacramento",
        "keywords": [
            [
                "Sacramento Roofing",
                "Roofers in Sacramento"
            ]
        ]
    }
];}

function data2() { return [
    {
        "cityName": "Los Angeles",
        "keywords": [
            [
                "HVAC Company in Los Angeles",
                "Los Angeles HVAC Inspection"
            ]
        ]
    },
    {
        "cityName": "Sacramento",
        "keywords": [
            [
                "HVAC Company in Sacramento",
                "Sacramento HVAC Inspection"
            ]
        ]
    }
];}

Combining SubArray Properties in a Redux Reducer Array by Matching Objects

Answer №1

1. State represented as an Array with merge logic in the reducer

2. State represented as an Object

Similar questions

Generating input fields dynamically in a list and extracting text from them: A step-by-step guide

Adding data from PHP into a designated div element

Obtain an NSRange object by using an NSArray

Verify whether a string, or a string split into individual words, includes any words from a given list

Came across some code where I was reading the source and stumbled upon `const {foo} = foo;

Prevent click event from bubbling up in React and DOM event mix situations

Encountered an issue while verifying req.params.id in an express.js route

Is there a way to simultaneously click on a link on one page and alter the position of a particular class on another page?

Recreating C# array initialization behavior through the power of Reflection

Checking the accuracy of pixels in an image

Tips for effectively utilizing JavaScript regex to precisely match a string before triggering the submit button

Can Materializecss be utilized without relying on jQuery?

There seem to be some issues arising from the Angular Chain HTTP component

Struggling to find your way around the header on my website? Let me give

Encountering an error message stating, "Unable to interpret property

Maintain cookie data between pages to remember form inputs

Chart.js is able to read JSON files offline, but it encounters difficulties reading them online

Transforming the String Values in an Array to Capitalize the First Letter of Each Word Using VueJS

What could be causing my div element to remain stationary despite the movement functions I have implemented?

Preventing preventDefault() from firing in JQuery only when necessary