Is this a dumb idea for how to simplify redux + react?

0

Issue

I’m trying to refactor an app to use redux toolkit but I’m running into an infinite loop when dispatching an action to set state and I suspect its because I’m not following the conventions.

What I’m attempting to do at a high level is have a useAppHandlers hook that returns all the handlers for the entire app. Similarly, I have a useAppState hook that returns a global object with all my state. Snippet from my config file:

export const useAppState = () => {
  const coingeckoApiState: AppState[typeof coingeckoApi.reducerPath] = useSelector(state => state.coingeckoApi);
  const connectionState: AppState['connection'] = useSelector(state => state.connection);
  const currencyState: AppState['currency'] = useSelector(state => state.currency);
  return { ...coingeckoApiState, ...connectionState, ...currencyState };
};

export const useAppHandlers = () => {
  const connectionHandlers = useConnectionHandlers();
  const currencyHandlers = useCurrencyHandlers();
  return { ...connectionHandlers, ...currencyHandlers };
};

^^Does that look problematic? I unfortunately can’t share the full repo because it’s private.

In all the redux examples I’ve come across, people import useDispatch in addition to the actions they are dispatching within each component. I really don’t like how it results in so many lines of code just for imports and set up ex:
const dispatch = useDispatch() repeated ad nauseam across the repo).

This repo is a real-world example of what I’m trying to avoid:

https://github.com/Uniswap/uniswap-interface/blob/4078390a4890445d1ff0ed5196fd4cb56a44de87/src/components/NavigationTabs/index.tsx#L116

Before I give up and just follow conventions, I’d like to pinpoint if the above way I’m configuring redux is the source of the infinite loops, or if its a random bug I introduced deeper in the code.

Solution

Honestly, just don’t. You will never be able to bundle-split in the future if the need for that arises when creating such a god-object. Also, adding something now means you have to touch at least one more file that is not using that something – same goes for deleting.

In addition to that, writing so "wide" selectors that select a full slice, even if your components only ever consume a part of that slice is a horrible thing for your performance – those components will always rerender if anything in that slice changes, no matter if it is important for your component.

Lastly: Just ignore your imports and let your IDE take care of it for you, probably out of the box. Your IDE can auto-import them for you. You can configure your IDE (with eslint autofix or other plugins) to automatically sort your imports alphabetically and also remove unused imports on save. I’m sure there is even a plugin that will just collapse your imports for you if you don’t want to see them.

PS: as for why in react-redux you usually import useDispatch everywhere, you can read a bit on the history of that decision here: https://react-redux.js.org/api/hooks#recipe-useactions

Answered By – phry

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More