O fim do boilerplate com Redux Toolkit

Redux é um gerenciador de estados muito utilizado hoje em dia na maioria das aplicações React, contudo o processo de criação/manutenção é um pouco tedioso, gera muita linha de codigo para fazer coisas simples.

Ainda tem pouca gente falando sobre isso, mas o Redux Toolkit vem ficando bem popular ultimamente. De acordo com o próprio site, a biblioteca tem a intenção de se tornar a forma padrão de se programar as funcionalidades do Redux.

A biblioteca trouxe algumas ferramentas bem úteis, mas nesse post vou falar sobre o createSlice, uma forma de facilitar e melhorar a forma de programar gerenciamento de estados com Redux.

O createSlice recebe um objeto de funções reducer, um nome e um state inicial. Assim, automaticamente ele gera um reducer com a correspondente action e action type. Essa simples função já simplifica muito código boilerplate.

Veja abaixo como funciona:

Nesse código criamos um todoSlice utilizando o createSlice() que como foi citado anteriormente, recebe um nome, state inicial e as funções reducers addTodo e removeTodo que são idênticas as que eram utilizadas antes e podem inclusive ser reaproveitadas.

Aqui temos o dispatch das actions e o selector, que é praticamente igual a como era utilizado antes.

O toolkit também fornece um próprio createStore que recebe o todoSlice criado anteriormente.

Isso é tudo

Com o Redux Toolkit, isso é tudo que precisamos para criar uma aplicação funcional, como podemos ver, deu pra otimizar muito o codigo e remover muito boilerplate eliminando os actions, action types, etc.

A bliblioteca oferece ainda varias outras funcionalidadades como o createAsyncThunk, vale a pena dar uma olhada na documentação aqui (infelizmente ainda não está disponível em português).

Caso alguém tenha interesse, o projeto com todo o codigo exibido nesse post está disponível aqui.

Referências: https://redux-toolkit.js.org/