State ValueChange not able to re-render component

Question

I have written the following code to update an array that is being passed from the global state to the component but even though the updated value is achieved in the console log I'm unable to re-render the screen to display the updated values. The values are either being updated or deleted and when you click on the delete button, you are expected to delete the 2nd last element in the array.

import React, { Component } from "react";
import { render } from "react-dom";
import { createStore, combineReducers } from "redux";
import { connect, Provider } from "react-redux";
import "./style.css";

const countReducer = (state = { count: [1, 2, 4, 3] }, action) => {
  switch (action.type) {
    case "INC":
      const newState = { ...state };
      console.log("Initial State: ", newState);
      const valueToBeAdded = newState.count[newState.count.length - 1] + 1;
      console.log("valueToBeAdded", valueToBeAdded);
      const lastElement = newState.count[newState.count.length - 1];
      console.log("lastElement", lastElement);
      newState.count.push(valueToBeAdded);
      console.log("count", state.count);
      return newState;
    case "DEC":
      const newState = { ...state };
      const valueToBeDeleted = newState.count[state.count.length - 2];
      console.log("valueToBeDeleted", valueToBeDeleted);
      newState.count.splice(newState.count.length - 2, 1);
      console.log("state.count: ", newState.count);
      return newState;
    default:
      return state;
  }
};

const reducers = combineReducers({
  counter: countReducer
});

const actions = {
  inc: () => ({ type: "INC" }),
  dec: () => ({ type: "DEC" })
};

const store = createStore(reducers);

class App extends Component {
  render() {
    console.log(this.props, actions);
    console.log("count", this.props.count);
    return (
      <div>
        <button onClick={this.props.inc}>Update</button>
        <button onClick={this.props.dec}>Delete</button>
        <div>Value: {this.props.count.join(",")}</div>
      </div>
    );
  }
}

const mapStateToProps = ({ counter }) => {
  return { count: counter.count };
};

const AppContainer = connect(
  mapStateToProps,
  actions
)(App);

render(
  <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById("root")
);

Answer 1

Since you don't have your own state and is always default to [1,2,3,4] and since you want to mutate it; assigning it to another variable and mutating it wouldn't work. You could use lodash 's cloneDeep to keep a copy of state and mutate your new state and return as new state.

You would only need to change two lines in your reducer.

1. Import the util from lodash. import cloneDeep from "lodash/cloneDeep";
2. Replace both occurences of const newState = {...state }; in INC and DEC actions with const newState = cloneDeep(state);