Redux Toolkit Installeren en Configureren

Om Redux Toolkit te gebruiken, moet je het samen met de React-bindings installeren.

Voer het volgende commando uit in je project:

npm install @reduxjs/toolkit react-redux

Dit installeert alles wat je nodig hebt om een store te maken en deze te koppelen aan je React-app.

De store opzetten

Maak een nieuw bestand aan voor de store. Een gebruikelijke locatie is:

src/store/store.js

In dit bestand maak je de store aan met behulp van configureStore:

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

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

Op dit moment is de store leeg. In de volgende hoofdstukken voeg je hier reducers aan toe.

Redux koppelen aan React

Om de store beschikbaar te maken in je app, omwikkel je je rootcomponent met Provider.

Open je hoofd-entrybestand (bijvoorbeeld main.jsx of index.js) en werk het als volgt bij:

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>
);

Nu is de Redux store beschikbaar in elke component.