React Hooks + Redux (useSelector) + Unform

Produtividade com React Hooks + Redux (useSelector) e Unform

Está vendo esse layout, é muito fácil alimentar esses campos com React Hooks + Redux + Unform?

formulário com react hooks

Veja:

código do formulário com react hooks

É só pegar os dados do reducer de user usando useSelector do React Redux (Hooks):

const profile = useSelector(state => state.user.profile);

Passar para dentro de initialData={profile} do Form

Os Inputs precisam ter apenas a propriedade name com o mesmo nomes dos campos que vem da api ou dos valores dos reducers.

Concluindo, uma vez que você entende os conceitos de React Hooks, Redux e como usar a nova lib Unform de formulários com React Hooks feito Rocketseat, você ganha muito em produtividade mesmo com Hooks já dando muita produtividade e fazendo com que diminuímos a verbosidade na escrita de código, com Unform essa verbosidade é menor ainda muita coisa fica abstraída pela biblioteca, e você só pega os dados da api e manda renderizar na tela e pronto, para submeter os dados do formulário também é muito fácil.

Se você entende todo o fluxo do Redux, React Hooks que no começo é difícil, a produtividade aumenta muito no médio prazo.

Curti demais os hooks e useSelector do Redux, e também tem o useDispatch que é bem maneiro e facilita mais ainda! Adeus mapStateToProps, mapActionsToProps, bindActionCreators.

Tem outras libs no mercado também que concorrem com Unform cada uma com seu prós e contra:

Se quiser ver a estilização com styled-components desse código:

Se quiser ver a estilização: https://gist.github.com/tgmarinho/8ab80ea0951abad6f2069e98e55850f5

Código do Profile: https://gist.github.com/tgmarinho/e551383fedbec22d1d5b202e31a0a745

Comentários