useInjectReducer updates store, leading to warning "Cannot update a component (x) while rendering a different component..." about react-boilerplate-cra-template HOT 6 OPEN

https://github.com/International-Slackline-Association/slackmap-ui

I have been working on this. You can see the new setup I made without injectors npm package. I don't have free time yet to update this repo, but if anybody is interested in solving it on their own then take a look. It's straightforward and explicit. Its in src/store.

By the way, it uses RTK Query instead Saga. Plus, it's really a web app working if you need some project references :)

from react-boilerplate-cra-template.

hmm, I have no solution within this repo atm. I already removed redux-injectors lib out of this repo and implemented them manually since that repo is dead. But, it will take a while till I release this version (winter probably. Have no time in summer).

from react-boilerplate-cra-template.

@Can-Sahin where is it available? How do I implement?

from react-boilerplate-cra-template.

Same issue. Waiting for a new release

from react-boilerplate-cra-template.

To others, I simply removed the injectors. This issue may cause some unexpected behaviors in the frontend.

from react-boilerplate-cra-template.

Just chiming in that this issue seems to occur when using RTK's dispatcher within a NextJS SSR block. I have a simple app skeleton that I am building out. It is using the SSR block to set the nav links into the state depending on the URL parameters. There is nowhere in the app's components where the store is changed other than with an onClick handler.

When I transition from the first page to the next this warning appears. The only way I can make it go away is by removing the NavLinks component which is using useAppSelect to get the nav links from my state/store.

Example SSR Block:

export const getServerSideProps = wrapper.getServerSideProps(
  (store) => async () => {
    // Set the nav first so we can access on the 404 page
    store.dispatch(
      setNavigation({
        isRestaurant: false,
        navLinks: genericNavLinks.links,
        isOpen: false,
      })
    );

    // Check we have page data
    const pageData = pages.find((page) => page.slug === "/");
    if (!pageData) return { notFound: true };
    return { props: { ...pageData } };
  }
);

The NavDrawer component (has the dispatch):

const NavDrawer: React.FC<NavDrawerProps> = ({ testId, id, style }) => {
  const { isOpen } = useAppSelector(selectNavigation);
  const dispatch = useAppDispatch();

  const handleNavClose: React.MouseEventHandler<HTMLButtonElement> = () =>
    dispatch(setNavigationOpen(false));

  return isOpen ? (
    <>
      <Underlay onClick={handleNavClose} isActive={true} />
      <div
        data-testid={testId}
        style={style}
        className={styles.wrapper}
        id={id}
      >
        <NavDrawerHeader />
        <NavLinks />
        <NavDrawerFooter />
      </div>
    </>
  ) : (
    <MobileNavOpenButton />
  );
};

The NavLinks component (If I remove the selector from here the warning goes away):

const NavLinks: React.FC<NavLinksProps> = ({ testId, id }) => {
  const { navLinks } = useAppSelector(selectNavigation);
  return (
    <div className={styles.wrapper}>
      <ul role="list" data-testid={testId} className={styles.list} id={id}>
        {navLinks.map((link) => (
          <NavLink key={link.id} link={link} />
        ))}
      </ul>
    </div>
  );
};

This has been doing my head in for a few days now, any advice?

from react-boilerplate-cra-template.