Instalando e Configurando o Redux Toolkit

Para começar a usar o Redux Toolkit, é necessário instalá-lo juntamente com as dependências do React.

Execute o seguinte comando no seu projeto:

npm install @reduxjs/toolkit react-redux

Isso instala tudo o que você precisa para criar uma store e conectá-la ao seu aplicativo React.

Configuração da Store

Crie um novo arquivo para a store. Um local comum é:

src/store/store.js

Dentro desse arquivo, crie a store utilizando configureStore:

import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {}
});

Neste momento, a store está vazia. Os reducers serão adicionados nas próximas etapas.

Conectando o Redux ao React

Para disponibilizar a store no seu aplicativo, envolva o componente raiz com o Provider.

Abra o arquivo principal de entrada (por exemplo, main.jsx ou index.js) e atualize-o da seguinte forma:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store/store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Agora a store do Redux está disponível em todos os componentes.