App is not rendering even when the state in the redux is changed

Question

I am having two buttons in a component thats under App component. Even though it is dispatching actions and store is updated, App is not re-rendered. Ideally on button press, I add some dummy name that will be put inside array and then a different component is rendered based on number items inside this array.

Can someone tell what is going wrong, I am a beginner to react and redux

Sandbox: https://codesandbox.io/s/panel-item-with-redux-hxmihq?file=/src/PanelAdder.js

App.jsx

import React from "react";
import "./styles.css";
import { Panel } from "./Panel";
import PanelAdder from "./PanelAdder";
import { useSelector } from "react-redux";

export default function App() {
  const panels = useSelector((state) => state.panelItems);

  return (
    <>
      <PanelAdder />
      <div className="cards-container">
        {panels || [].map((name) => <Panel {...{ name }} />)}
      </div>
    </>
  );
}

PanelAdder.jsx

import React from "react";
import { useDispatch } from "react-redux";
import { addPanel } from "./actions/counterActions";

export default function PanelAdder() {
  const dispatch = useDispatch();

  const handleClick = (name) => {
    dispatch(addPanel(name));
  };

  return (
    <>
      <button onClick={() => handleClick("Panel 1")}> Add Panel 1</button>
      <button onClick={() => handleClick("Panel 2")}> Add Panel 2</button>
    </>
  );
}

Panel.jsx

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faSquareMinus,
  faWindowMaximize,
  faRectangleXmark
} from "@fortawesome/free-solid-svg-icons";

export const Panel = ({ name }) => {
  return (
    <>
      <div className="card">
        <div className="card-actions">
          <FontAwesomeIcon icon={faSquareMinus} />
          <FontAwesomeIcon icon={faWindowMaximize} />
          <FontAwesomeIcon icon={faRectangleXmark} />
        </div>
        <div className="card-body">{name}</div>
      </div>
    </>
  );
};

Answer 1

You have 2 issues:

First in your combineReducers function you are adding the reducer called panels. Redux will add this to the state object. So when you are referencing it you need to refrence the panels object that is nested inside your state object. You need to get the following in your useSelector useSelector((state) => state.panel.panelItems)

Second you are doing the following in your app component {panels || [].map((name) => <Panel {...{ name }} />)}. So what you are doing here is displaying the panels array or mapping through an empty array but you never actually map through the panels array. But what you need to do is map through the panels array. So you can just map the panels array {panels.map((name) => <Panel {...{ name }} />)}

So your app component should look like the following:

import React from "react";
import "./styles.css";
import { Panel } from "./Panel";
import PanelAdder from "./PanelAdder";
import { useSelector } from "react-redux";

export default function App() {
  const panels = useSelector((state) => state.panel.panelItems);

  return (
    <>
      <PanelAdder />
      <div className="cards-container">
        {panels.map((name) => <Panel {...{ name }} />)}
      </div>
    </>
  );
}