Instalação do Redux e RTK em uma aplicação React

Nesta lição, vamos instalar em nossa aplicação o pacote React-Redux, que permite aos componentes React funcionarem em conjunto com o Redux e a ferramenta Redux Toolkit (abreviada como RTK).

Vamos abrir nosso projeto e digitar no terminal o seguinte comando:

npm install @reduxjs/toolkit react-redux

Agora precisamos criar uma store (armazenamento), onde o estado global da nossa aplicação será armazenado. Primeiro, na pasta src vamos criar uma pasta app, e dentro dela um arquivo store.js. Depois, neste arquivo, precisamos importar configureStore do RTK:

import { configureStore } from '@reduxjs/toolkit'

Em seguida, vamos criar uma store vazia e passar pelo menos um reducer:

export default configureStore({
	reducer: {}
});

Para que nossos componentes React possam funcionar com a store, vamos fazer o seguinte. Vamos para nosso arquivo main.jsx, no qual já temos o código:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
)

Nos imports, vamos adicionar linhas para a store criada na etapa anterior e para o componente Provider:

import store from './app/store'
import { Provider } from 'react-redux'

Em seguida, vamos envolver nosso componente principal App no Provider, e passar a store para ele como prop:

<React.StrictMode>
	<Provider store={store}>
		<App />
	</Provider>
</React.StrictMode>

E, finalmente, no componente React principal App, vamos colocar o seguinte código:

function App() {
	return <h2>This is my first Redux app!</h2>
}

export default App

Vamos iniciar nosso projeto novamente e ver na janela do navegador: 'This is my first Redux app!'. Por enquanto, não vamos prestar atenção ao aviso sobre a ausência de um reducer válido. Você conseguiu, parabéns :).

Instale o Redux e o RTK em sua aplicação, conforme descrito na lição. Certifique-se de que sua aplicação está funcionando.