Entendendo useState e useReducer


はじめに



アプリケーションは、ライブラリのファンダメンタルズに反応するものであり、バージョン 16.8 ではフックが使用されており、useState や useReducer が使用されています. Nesse post eu vou tentar dar uma breve explicação sobre cada um dos hooks e suas specificidades;

使用状態



De acordo com @types/react o hook useState possui a seguintetipagem:

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];



  • O useState recebe um parametro, o initialState
  • Esse parametro pode ser um valor do tipo S ou uma função que retorna o tipo S, que um tipo genérico ou seja, assume o tipo do seu estado, podendo ser um numero, string, ou um object qualquer.



  • O useState は、複数の場所で配列を返します
  • S se refere ao estado atual
  • Dispatch> é a função que vai atualizar aquele componente, o dispatch pode receber o valor que o estado vai ser atualizado ou um callback do tipo ((prevState: S) => S); recebendo o estado anterior e retornando o estado atual.


  • useReducer



    Ainda de acordo com @types/react o hook useReducer possui a seguintetipagem,A esttrutura básica do useReducer é uma função que recebe entre 2 e 3 parametros e retorna um array de duas posições:

      function useReducer<R extends Reducer<any, any>, I>(                                  
                reducer: R,                                                                       
                initializerArg: I,                                                                
                initializer: (arg: I) => ReducerState<R>                                          
            ): [ReducerState<R>, Dispatch<ReducerAction<R>>]; 
    )
    


  • Os parametros do useReducer:
  • リデューサーとコールバックは、次の estrutura で使用されます: (prevState: S, action: A) => S; , esse コールバックと同等の機能は、SetStateAction によって使用されます. Tipo da ação, passar dados attravés do payload, o reducer deve ficar mais claro durante os exemplos.
  • O initializerArg assim como initialState do useState é o parametro que vai receber o estado inicial do estado.
  • O initializer , esse recebe uma função responsável por modificar o initializeArg durante a montagem do componente modificando o estado inicial do reducer.
  • O useReducer retorna um array com 2 parametros: [ReducerState<R>, Dispatch<ReducerAction<R>>]
  • O primeiro parametro é o State do useReducer
  • O segundo parametro é a função que vai chamar o reducer (1º parametro do useReducer), recebendo parametro action, onde no retorno do reducer o state é atualizado.



  • partindo do caso de uso que o nosso estado é uma lista de jogadores, como podemos modificar essa lista utilizando o useState e o useReducer.

    使用状態




    /* No caso do useState se quisermos alterar esse estado em um componente abaixo podemos passar o setPlayer como prop. e montar o callback no componente abaixo, ou montar o addPlayer e passa-lo como prop. */
    
    const [players, setPlayers] = useState(initialState); 
    const addPlayer = (newPlayer) => {
      setPlayers([...players, newPlayer])
    }
    // Como o setPlayers vai ser chamado 👇
    addPlayers('Ronaldo')
    
    


    useReducer




    /* Com o useReducer uma vez que defnimos a função reducer e suas ações passamos simplesmente o dispatch para baixo na arvore de componentes e cada componente chama a sua respectiva ação */
    
    const reducer = (state, action) => {
        switch (action.type) {
          case "addPlayer": {
            const newState = [...state, action.payload];
            return newState;
          }
          default:
        }
      }
     const [players, dispatch] = useReducer(reducer, initialArg);
    // Como o reducer vai ser chamado 👇
    dispatch({ type : addPlayer, payload : "Ronaldo" })
    


    Os dois códigos acima fazer a exatamente a mesma coisa, o useReducer parece muito mais verboso e compelxo que o useState, quais suas vantagens ?想像してみてください uma situação que muitos outros métodos, adicionar, remover, atualizar... e ainda com outros estados como estado de loading, error entre outros. Como fariamos essas outras funções acessíveis para os components que a consomem ? criamos uma nova prop para cada função, até setia possível mas imagina o caos que não seri esse componente, o useReducer aparece nesses casos onde você precisa lidar com muitos métodos e estados de um componente, a função reducer poderia ficar em um arquivo separado aumentando a qualidade e legibilidade do código, você saberia exatamente em qualtipo de action modificar, e ao invés de passar cada método com uma nova prop você pode passar só o dispatch e cada componente chama o tipo de ação que precisar.

    Quando você precisa lidar com apenas um estado, é mais simples conveniente utilizar o useState ao invés do use Reducer apenas um estado para



    参考文献


  • React Documentation