Comment passer de Redux à Recoil

Nous devons définir l'état completedTodoCount . Cela doit être calculé à partir de l'état todos . Pour cela, nous allons créer ce que l’on appelle le sélecteur dans Recoil. Ouvrez recoil / todos.js et importez le sélecteur du package Recoil.

 import   { atom  selector }   from   "recoil" ; 

Puis définissez le sélecteur comme vous le voyez ci-dessous:

 export   const  completedTodoCount  =   selector  (  {
  clé :   "completedTodoCount" 
   get :   ( {  get  } )   => [19659014] {
     const  list  =   get  ( todos ) ; 

     return  list .  réduire  (
       ( count  todo )   =>   ( todo .  completed ?  compte  +   1  :  compte ) 
       0 
    ) ; 
  } 
 } ) ; 

Pour définir un sélecteur, vous appelez la fonction selector () avec un objet qui contient le nom de l'état et un get () qui calculera et retournera une valeur. Cette fonction reçoit un objet qui a une fonction get () qui peut être utilisée pour récupérer des données d'autres atomes ou sélecteurs.

Filtrage de Todos

À ce stade, j'ai couvert la plupart des bases de Recoil et vous pouvez voir en quoi il est différent de Redux mais étroitement modélisé vers l'API Hooks de React. Le reste de cet article ajoutera simplement du code pour rendre l'application pleinement fonctionnelle à l'aide de Recoil.

Le composant suivant sur lequel nous allons travailler est le composant . Ouvrez containers / FilterLink.js et mettez à jour le fichier avec le code ci-dessous:

 import  React  from   "react" ; 
 import   { useRecoilState }   de   "recoil" ; 
 import  Link  from   "../ components / Link" ; 
 import   { visibilitéFilter }   from   "../ recoil / todos" ; 

 export   default   ( { filtre  enfants } )   =>   {
   const   [ visibilité  setVisibilityFilter ]   =   useRecoilState  ( visibilitéFilter ) ; 
   const   setFilter   =   () [19659074] =>   setVisibilityFilter  ( filter ) ; 

   return   (
     < Lien
      actif  =  { filtre  ===  visibilité } 
      setFilter  =  { setFilter } 
      enfants  =  { enfants } 
     / > 
  ) ; 
} ; 

Nous rendons ici le composant qui rendra l'entrée utilisée pour sélectionner comment filtrer les todos qui seront affichés. Nous avons utilisé un nouvel état que nous n’avons pas encore créé, nous allons donc l’ajouter. Ouvrez recoil / todos.js et ajoutez la fonction ci-dessous:

 import   {
  SHOW_ALL 
  SHOW_COMPLETED 
  SHOW_ACTIVE 
}   from   "../ constants / TodoFilters" ; 

 export   const  visibilitéFilter  =   atom  ] ( {
  clé :   "visibilitéFilter" 
   default :  SHOW_ALL 
} ) ; 

Display Todos [19659007] La prochaine chose à faire est d'afficher les todos en fonction du filtre défini. Pour cela, nous allons ajouter un nouveau sélecteur et mettre à jour le composant . Tant que vous avez encore recoil / todos.js ouvert, ajoutez le sélecteur ci-dessous.

 export   const  filteredTodos  =   selector  ( ] {
  clé :   "filteredTodos" 
   get :   ( {  get  } )   => [19659014] {
     const  filter  =   get  ( visibilitéFilter ) ; 
     const  list  =   get  ( todos ) ; 

     switch   ( filter )   {
       case  SHOW_COMPLETED : [19659427] retour  liste .  filtre  ( ( t )   =>  t .  terminé  ) ; 
       cas  SHOW_ACTIVE : 
         return  list .  filter  ( ( t ) [19659074] =>  !  t .  terminé ) ; 
       default : 
         return  list ; [19659112]} 
  } [19659017]
} ) ; 

Open containers / VisibleTodoList.js et mettez à jour le fichier avec le code ci-dessous:

 import  React  from   "react" ; 
 import  TodoList  from   "../ components / TodoList" ; 
 import   { filteredTodos  todos }   from   "../ recoil / todos" ; 
 import   { useRecoilValue  useSetRecoilState }   from   "recoil" ; 

 const   VisibleTodoList   =   ()   =>   {[19659047] const  filteredTodoList  =   useRecoilValue  ( filteredTodos ) ; 
   const  setTodos  =  useSetRecoilate (19659042] useSetRecoilate (19659017)  todos ) ; 

   const   completeTodo   = [19659014] ( todoId )   =>   {
     setTodos  ( ( previousTodos )   => 
      previousTodos .  carte  ( ( todo )   => 
        todo .  id  ===  todoId ?   {  ...  todo  completed : [19659074]!  todo .  completed }  :  todo
      ) 
    ) ; 
  } ; 

   const   deleteTodo   =   ( todoId )   => [19659014] {
     setTodos  ( ( previousTodos )   => 
      previousTodos .  filter  ( ( todo )   =>  todo .  id ! ==  todoId ) 
    ) ; 
  } ; 

   const   editTodo   =   ( todoId  text )   =>   {
     setTodos  ( ( previousTodos )   => 
      previousTodos .  carte  ( ( todo )   => 
        todo .  id  ===  todoId ?   {  ...  todo  text } [19659014]:  todo
      ) 
    ) ; 
  } ; 

   return   (
     < TodoList
      filteredTodos  =  { filteredTodoList } 
      actions  =  { { completeTodo  deleteTodo  editTodo } } 
     / > [19659113]) ; 
} ; 

 export   default  VisibleTodoList ; 

Ici, nous avons ajouté trois fonctions pour supprimer un todo, le mettre à jour ou le marquer comme terminé. Nous pouvons considérer ces fonctions comme une combinaison d'actions et de fonctions réductrices dans Redux. J'ai décidé de placer les fonctions dans le même fichier que le composant qui en a besoin, mais vous pouvez les extraire dans un fichier séparé si vous le souhaitez.

À ce stade, nous avons mis à jour l'application pour utiliser Recoil au lieu de Redux. La dernière chose à faire est de mettre à jour components / App.js . Ouvrez ce fichier et modifiez l'instruction d'importation pour les composants

et .

 import  Header  from   "./ Header" ; 
 import  MainSection  from   "./ MainSection" ; 

Et voilà, une application todo mise à jour de l'utilisation de Redux to Recoil.

Conclusion

Déplacer cette application de Redux vers Recoil a été moins compliqué que je ne l’aurais imaginé. Je suppose que ce ne sera pas le cas pour toutes vos applications, en fonction de la façon dont vous avez conçu votre état Redux et de quelques autres facteurs. Mais je pense qu’elle est assez facile à utiliser pour les nouvelles applications, car elle est calquée sur l’API React que vous connaissez bien.

Pour en savoir plus sur Recoil, consultez recoiljs.org . Vous pouvez trouver l'application complète avec le code source sur GitHub .

---