javascript - Ska jag använda connect eller hooks för react redux och vilket har bättre prestanda?

Jag använder react-redux för mitt react-projekt, tydligen finns det 2 sätt att använda redux-tillståndet connect eller useSelector,

Min redux-butik har en reducer för varje sida,

För startsida > homePageReducer

För Meddelandesida > messagePageReducer

För autentisering > authReducer

För användarens blogg > blogReducer

För Inställningar > userSettingsReducer

För användarens profil > userProfileReducer

I min toppnivåkomponent eller huvudkomponent har jag använt en selector-hook för att hämta alla reducers och skickat ner reducers som props till de nödvändiga komponenterna

const {home, messages, auth, settings, blogs} = useSelector( (state:RootState) => state)

return(
<main>
     <Switch>
         <Route exact to={HOME_ROUTE}>
              <HomeApp auth={auth} settings={settings} userProfile={userProfile}/>
         </Route>
         <Route exact to={CHAT_ROUTE}>
              <ChatApp auth={auth} messages={messages} userProfile={userProfile}/>
         </Route>
         <Route exact to={BLOG_ROUTE}>
              <BlogApp auth={auth} blogs={blogs} userProfile={userProfile}/>
         </Route>
     </Switch>
</main>
)

Är det en bra arkitektur för mitt projekt och ger inga prestandaproblem för mitt projekt eller borde jag använda connect eller useSelector hook inuti de där komponenterna? Vad är bättre?

Svar #1

Redux har en mycket användbar stilguide som förklarar alla nuvarande bästa metoder. Det finns några rekommendationer på den listan som är tillämpliga på ditt exempel.

Använd React-Redux Hooks API

Föredra att använda React-Redux hooks API (useSelector och useDispatch) som standardmetod för att interagera med en Redux-store från dina React-komponenter.

Anslut fler komponenter för att läsa data från lagret

Föredra att ha fler UI-komponenter som prenumererar på Redux-butiken och läser data på en mer detaljerad nivå. Detta leder vanligtvis till bättre UI-prestanda, eftersom färre komponenter behöver renderas när en viss del av tillståndet ändras.

Anropa useSelector flera gånger i funktionskomponenter

När du hämtar data med useSelector-hooken, föredra att anropa useSelector många gånger och hämta mindre mängder data, istället för att ha ett enda större useSelector-anrop som returnerar flera resultat i ett objekt.

Du vill definitivt använda useSelector. Istället för att välja allt i föräldern och skicka ner det, bör dina Route render-komponenter inte ta några props och själva hämta allt de behöver från Redux.

const App = {
  return(
     <Switch>
         <Route exact to={HOME_ROUTE}>
              <HomeApp />
         </Route>
         <Route exact to={CHAT_ROUTE}>
              <ChatApp />
         </Route>
         <Route exact to={BLOG_ROUTE}>
              <BlogApp />
         </Route>
     </Switch>
  )
}

const HomeApp = () => {
  const userProfile = useSelector( (state: RootState) => state.user );

  // We probably don't need the whole auth object
  const isLoggedIn = useSelector( (state: RootState) => !! state.auth );

  // Do you need to return *every* setting?  Just select what you need.
  const settings = useSelector( (state: RootState) => state.settings );
 
  ...
}

Du kanske vill skapa selektor-funktioner särskilt för ofta åtkomliga värden som userProfile.

Ett alternativ till att modifiera de nuvarande komponenterna HomeApp etc. skulle vara att skapa en HomeScreen-komponent som ett omslag runt HomeApp och behålla HomeApp som en ren presentational-komponent. HomeScreen skulle hämta all data från Redux och anropa HomeApp med rätt props.