Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – proplem with redux not re render the component when it be inside the "OnClick" event

My english is not very good sorry
btw i have using ract+redux

react code:

import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import githubLogo from "../assets/github.png";
import { useSelector, useDispatch } from "react-redux";
import store from "../assets/Store/store";
export default function NavBar() {
  const x = useSelector((state) => state.layout)
  console.log(x)
  useGSAP(() =>
    gsap.from(".nav-bar-item", {
      y: -100,
      stagger: {
        amount: 0.5,
        grid: [1, 1],
        from: "center",
      },
    })
  );
  const dispatch = useDispatch()
  const main = () => {
    dispatch({type:"Main"})
  }
  const blog = () => {
    dispatch({type: "Blog"})
  }
  const about = () => {
    dispatch({type: "About"})
  }
  return (
    <section className="nav-bar flex justify-between p-3">
      <div className="h-fit">
        <h1 className="nav-bar-item text-yellow-600 text-5xl font-bold">N0</h1>
      </div>
      <div className="flex gap-x-6 text-xl nav-bar-layouts h-fit p-3">
        <button
          className="nav-bar-item relative"
          onClick={main()}
        >
          Main
        </button>
        <button
          className="nav-bar-item relative"
          onClick={
            about()
        }
        >
          About
        </button>
        <button
          className="nav-bar-item relative"
          onClick={
            blog()
          }
        >
          Blog
        </button>
      </div>
      <div className="h-fit">
        <a href="https://github.com/nfrx1" target="blank">
          <img
            src={githubLogo}
            className="nav-bar-item bg-white rounded-full border-zinc-950 w-16 h-16"
            alt="github"
          ></img>
        </a>
      </div>
    </section>
  );
}


import { createStore } from "redux";

const reducer = (state, action) => {
    if (action.type == 'Blog'){
        return {layout: "Blog"}
    }
    else if (action.type == 'About'){
        return {layout: "About"}
    }
    return {layout: "Main"}
}

const store = createStore(reducer)
export default store

}`

const store = createStore(reducer)
export default store
`

when i use dispatch out the OnClick event it worked and re render but when i use it in "OnClick" event it change the layout but not re render the component

i try to use useSelector and react toolkit

Tags:

2

Answers


  1. 0

    The issue in your NavBar component where it does not re-render upon clicking seems to stem from a misunderstanding of how to properly assign click event handlers in React. You are currently invoking the handler functions immediately during the component’s render process, rather than assigning them to be triggered by the click events.

    When you use onClick={about()}, you are calling the about function as soon as the component renders, and its return value (if any) is being set as the event handler. This is not typically what you want unless about() returns another function that should handle the event. The correct approach is to pass the function reference itself to the event handler without calling it, like onClick={about}.

    Here’s the corrected approach in your component:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
function NavBar() {
  const dispatch = useDispatch();

  // Action dispatchers defined as functions
  const main = () => {
    dispatch({ type: "Main" });
  };
  const blog = () => {
    dispatch({ type: "Blog" });
  };
  const about = () => {
    dispatch({ type: "About" });
  };

  return (
    <section>
        <button onClick={main}>
          Main
        </button>
        <buttononClick={about}>
          About
        </button>
        <button onClick={blog}>
          Blog
        </button>
    </section>
  );
}

    • onClick={handler}: This syntax correctly assigns the function referenced by handler as the event handler for the button’s click event. This means that handler will only be called when the button is clicked.

    • onClick={handler()}**: This incorrectly invokes handler` during rendering and assigns its return value as the event handler, which is not the intended behavior unless the return value itself is a function designed to handle the click.

    Using an arrow function in the onClick attribute is useful for including additional logic or passing arguments directly to the handler function. For example:

    <button onClick={() => about('Additional info')}>
  About
</button>

    This allows you to customize the handler function call with specific parameters or multiple statements at the time of the click, such as:

    <button onClick={() => { console.log('Button clicked'); about(); }}>
  About
</button>

    While arrow functions in handlers can slightly impact performance due to being re-created on each render, they offer flexibility for more complex interactions and are generally safe for use in UI event handling.

    Login or Signup to reply.
  2. 0

    Seemingly you write onClick wrong.

    Try this: onClick={main} or
    onClick={()=>main()}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search