Компонент не выполняет рендеринг, хотя состояние редукса обновляется

Question

, поэтому у меня есть 4 кнопки 4 разных цветов и 10 квадратов, которые должны иметь цвет последних 10 нажатий на кнопки.

Я отображаю состояние редукса для отображения квадрата.Я также храню квадратные цвета в localStorage.

Когда я нажимаю кнопку, состояние обновляется, поэтому я сразу вижу изменение цвета в квадратах.Однако это происходит только тогда, когда я обновляю страницу.мой App.js компонент не рендерится повторно, когда я нажимаю кнопку.

Почему?

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;

действия и редукторы:

//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

Я думаю, что redux не распознает изменение состояния, потому что ссылка на массив squareColors остается прежней, поэтому вы должны передать копию этого массива, которая будет иметь новую ссылку на метод setColors.

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