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.
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/ |