Pour garantir que l'onglet actif du composant Chakra UI Tab est mis à jour lorsque la valeur dans Redux change, vous pouvez utiliser le hook useEffect fourni par React. Le hook useEffect vous permet d'effectuer des effets secondaires tels que la mise à jour de l'onglet actif lorsqu'une dépendance spécifique change.

Vous pouvez modifier le composant MyTabs comme suit :

import { useEffect } from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/react';
    import { selectNumber, updateNumber } from 'path/to/your/redux/slice';
    function MyTabs() {
      const number = useSelector(selectNumber);
      const dispatch = useDispatch();
      useEffect(() => {
        // Update the active tab index in Redux when the number changes
        dispatch(updateNumber(number));
      }, [number, dispatch]);
      return (
        <Tabs defaultIndex={number}>
          <TabPanels>
            <TabPanel>
              <Image boxSize="200px" fit="cover" src="" />
            </TabPanel>
            <TabPanel>
              <Image boxSize="200px" fit="cover" src="" />
            </TabPanel>
          </TabPanels>
          <TabList>
            <Tab>Naruto</Tab>
            <Tab>Sasuke</Tab>
          </TabList>
        </Tabs>
      );
    }**'

Dans ce code mis à jour, le hook useEffect est utilisé pour distribuer une opération (updateNumber) lorsque la valeur change. Assurez-vous d'avoir implémenté les opérations appropriées et la logique de réduction (selectNumber) dans votre tranche Redux pour gérer les mises à jour numériques.

En faisant cela, l'onglet actif sera automatiquement mis à jour en fonction de la valeur numérique stockée dans Redux.

defaultIndex Les attributs sont :

Voir la documentation Composants contrôlés et non contrôlés et Valeurs par défaut  :

Vous pouvez utiliser Onglet Contrôlé

const tabIndex = useSelector(selectnumber);
const dispatch = useDispatch();

<Tabs 
  index={tabIndex} 
  onChange={(index) => dispatch({ type: 'SET_TAB_INDEX', payload: { index } })}>
</Tabs>