React Ho.oks + Redux (useSelector) + Unform

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

Veja:

É 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 os mesmos nomes dos campos que vem da api ou dos valores armazenados nos 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 pela Rocketseat, você ganha muito em produtividade mesmo com Hooks já dando muita produtividade e fazendo com que diminuamos 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:

• React Hook Form: https://react-hook-form.com/
• Redux Form: https://redux-form.com/8.2.2/
• Formik: https://jaredpalmer.com/formik/docs/overview

Se quiser ver a estilização com styled-components desse código: https://gist.github.com/tgmarinho/8ab80ea0951abad6f2069e98e55850f5

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