Installera och Konfigurera Redux Toolkit

För att börja använda Redux Toolkit behöver du installera det tillsammans med React-bindningarna.

Kör följande kommando i ditt projekt:

npm install @reduxjs/toolkit react-redux

Detta installerar allt du behöver för att skapa en store och koppla den till din React-app.

Konfigurera Store

Skapa en ny fil för store. En vanlig plats är:

src/store/store.js

I denna fil skapar du store med hjälp av configureStore:

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

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

Just nu är store tom. Du kommer att lägga till reducers i kommande kapitel.

Ansluta Redux till React

För att göra store tillgänglig i din app, omge din rotkomponent med Provider.

Öppna din huvudinmatningsfil (till exempel main.jsx eller index.js) och uppdatera den så här:

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 är Redux store tillgänglig i varje komponent.