title: React-Redux: Copying an array from the state in Reducer function so that you can modify it
body: <p>I am working on a React application and I am using Redux to store the state. I have the following code:</p>
  
  <p>menu.reducer.js:</p>
  
  <pre><code>import { INCREASE_CATEGORY_RANK, DECREASE_CATEGORY_RANK } from './menu.types';
  
  const INITIAL_STATE = []
  
  
  export default (state = INITIAL_STATE, action) =&gt; {
      switch (action.type) {
  
          case INCREASE_CATEGORY_RANK: {
              console.log("Printing the state");
              console.log(state);
              return state.map(category =&gt; {
                  if (category._id === action.payload._id) {
                      const oldrank = category.rank;
                      return {
                          ...category,
                          rank: oldrank + 1
                      }
                  } else {
                      return category;
                  }
              })
          }
          case DECREASE_CATEGORY_RANK: {
              return state.map(category =&gt; {
                  if (category._id === action.payload._id &amp;&amp; category.rank !== -1) {
                      const oldrank = category.rank;
                      return {
                          ...category,
                          rank: oldrank - 1
                      }
                  } else {
                      return category;
                  }
              })
          }
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>menu.types.js:</p>
  
  <pre><code>export const INCREASE_CATEGORY_RANK = "INCREASE_CATEGORY_RANK";
  export const DECREASE_CATEGORY_RANK = "DECREASE_CATEGORY_RANK";
  </code></pre>
  
  <p>menu.actions.js:</p>
  
  <pre><code>import { apiUrl, apiConfig } from '../../util/api';
  import { INCREASE_CATEGORY_RANK, DECREASE_CATEGORY_RANK } from './menu.types';
  
  export const getMenu = () =&gt; async dispatch =&gt; {
      const response = await fetch(`${apiUrl}/menu`);
      if (response.ok) {
          const menuData = await response.json();
          dispatch({ type: GET_MENU, payload: menuData })
      }
  }
  
  export const increaseCategoryRank = category =&gt; dispatch =&gt; {
      dispatch({ type: INCREASE_CATEGORY_RANK, payload: category })
  }
  
  export const decreaseCategoryRank = category =&gt; dispatch =&gt; {
      dispatch({ type: DECREASE_CATEGORY_RANK, payload: category })
  }
  </code></pre>
  
  <p>category-arrows.component.jsx:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { increaseCategoryRank, decreaseCategoryRank } from '../../redux/menu/menu.actions';
  import './category-arrows.styles.scss';
  
  class CategoryArrows extends Component {
  
      render() {
  
          const { category, increaseCategoryRank, decreaseCategoryRank } = this.props;
  
          return (
              &lt;div class="arrows-container"&gt;
                  &lt;div class="up-arrow" onClick={() =&gt; this.props.increaseCategoryRank(category)}&gt;&lt;/div&gt;
                  &lt;div class="category-rank"&gt;
                      &lt;p&gt;{category.rank}&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="down-arrow" onClick={() =&gt; this.props.decreaseCategoryRank(category)}&gt;&lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default connect(null, { increaseCategoryRank, decreaseCategoryRank } )(CategoryArrows);
  </code></pre>
  
  <p>For my Reducer function, the initial state is retrieved from a database. The Reducer code deals with the <code>menu</code> array, which is an array of objects:</p>
  
  <p><a href="https://i.stack.imgur.com/djq6e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/djq6e.png" alt="enter image description here"></a></p>
  
  <p>I want to sort this <code>menu</code> array with respect to the <code>rank</code> property value, and also swap elements in the array based on certain conditions. To do this, I have to copy the array first, make the modifications and then reassign the state to this new array.</p>
  
  <p>I have tried to console.log() the state to see what it is in my Reducer function. When I click on the <code>up-arrow</code> div in <code>category-arrows.component.jsx</code>, the <code>INCREASE_CATEGORY_RANK</code> action is dispatched. When I check the Console, I get the following:</p>
  
  <p><a href="https://i.stack.imgur.com/tk7Td.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tk7Td.png" alt="enter image description here"></a></p>
  
  <p>I am not sure how to copy the menu array from the state in my Reducer function so that I can make the modifications that I want to and then reassign this array to the state. Any insights are appreciated.</p>