Component does not re-render although redux state is updated

Question

so I have 4 buttons of 4 different colors and 10 squares that should have the color of the last 10 clicks on buttons.

I map on the the redux state to display the square. I also store the squareColors in localStorage .

When I click a button, the state updates so I should immediatly see the change of colors in squares. However, it only happens when I refresh the page. my App.js component doesn't re-render when I click a button.

Why ?

App.js:

import React from 'react';
import { connect } from 'react-redux';
import { setColors } from './redux/actions';
import './App.css';
import CornerButton from './components/CornerButton';
import Square from './components/Square';

const styles = // some styles

class App extends React.Component {

  componentDidMount() {
    if (localStorage.getItem('lastTenColors')) {
      let squareColors = JSON.parse(localStorage.getItem('lastTenColors'));
      this.props.setColors(squareColors);
    } else {
      let squareColors = localStorage.setItem('lastTenColors',  JSON.stringify([...Array(10)]));
      this.props.setColors(squareColors);
    }
  }

  render() {
    return (
          <div style={styles.container}>
            <div style={styles.topRow}>
              <CornerButton color="red"/>
              <CornerButton color="blue"/>
            </div>
            <div style={styles.middleRow}>
              {this.props.squareColors.map((color, i) => <Square key={i} color={color}/>)}
            </div>
            <div style={styles.bottomRow}>
              <CornerButton color="cyan"/>
              <CornerButton color="green"/>
            </div>
          </div>
      );
  }
}

const mapDispatchToProps = { setColors }

const mapStateToProps = state => {
  return {
    squareColors: state.colors.squareColors
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

CornerButton.js:

import React from 'react';
import { connect } from 'react-redux';
import {setColors} from '../redux/actions';

const styles = // some styles...

class CornerButton extends React.Component {

  updateSquaresColors = (color = null) => {
    let squareColors = this.props.squareColors;
    squareColors.unshift(color);
    squareColors.pop();
    this.props.setColors(squareColors);
    localStorage.setItem('lastTenColors',  JSON.stringify(squareColors))
  }


  render() {
    return (
      <button
      style={{...styles.button, color: this.props.color, borderColor: this.props.color}}
      onClick={() => this.updateSquaresColors(this.props.color)}>
        click me!
      </button>
    );
  }
}

const mapDispatchToProps = { setColors }

const mapStateToProps = state => {
  return {
    squareColors: state.colors.squareColors
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(CornerButton);

Square.js:

import React from 'react';

const styles = //some styles...

const Square = props => (
  <div style={{...styles.square, backgroundColor: props.color}}>
  </div>
);

export default Square;

actions and reducers :

//action
import { SET_COLORS } from "./actionTypes";


export const setColors = (squareColors = [...Array(10)]) => ({
  type: SET_COLORS,
  payload: {
    squareColors
  }
});

// reducer
const initialState = {
  squareColors: [...Array(10)]
};

export default function(state = initialState, action) {
  switch (action.type) {
    case SET_COLORS: {
      return {
        ...state,
        squareColors: action.payload.squareColors
      };
    }
    default:
      return state;
  }
}

Answer 1

I think that redux does not recognize the state change because the reference to the squareColors array remains the same, so you must pass a copy of this array which will have a new reference to the setColors method.

      updateSquaresColors = (color = null) => {
        let squareColors = this.props.squareColors;
        squareColors.unshift(color);
        squareColors.pop();
        this.props.setColors([...squareColors]); //changed
        localStorage.setItem('lastTenColors',  JSON.stringify(squareColors))
      }