title: Redux deep clone - state is always equal
body: <p>I have the following reducer in React Redux:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export const reducer = (state = initialStateData, action) =&gt; {
      switch (action.type) {
        case Action.TOGGLE_ARR_FILTER:
          {
            const subArr = state.jobOffers.filters[action.key];
            const filterIdx = subArr.indexOf(action.value[0]);
            const newArr = { ...state.jobOffers.filters
            };
  
            if (filterIdx !== -1) {
              newArr[action.key].splice(filterIdx, 1);
            } else {
              newArr[action.key].push(action.value[0]);
            }
  
            return {
              ...state,
              jobOffers: {
                ...state.jobOffers,
                filters: {
                  ...newArr,
                },
              },
            };
          }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And this is my object:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const initialStateData = {
    jobOffers: {
      filters: {
        employments: [],
        careerLevels: [],
        jobTypeProfiles: [],
        cities: [],
        countries: [],
      },
      configs: {
        searchTerm: '',
        currentPage: 1,
        pageSize: 5,
      },
    },
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>The reducer as such seems to work, it toggles the values correctly.</p>
  
  <p>But: Redux always shows "states are equal", which is bad as it won't recognize changes.</p>
  
  <p>Can someone help ? I assume that I am returning a new object..</p>