How would you setup RTK in your React project?

Question

Accepted Answer

To set up Redux Toolkit (RTK) in a React project, you install the required packages, create a slice, configure the store, and connect it to your React components using React-Redux hooks. Install dependencies: `npm install @reduxjs/toolkit react-redux` Create a slice using **`createSlice`** for your state and reducers. Configure the store using **`configureStore`** and add your slices as reducers. Wrap your app with **``** in `index.js`. Use **`useSelector`** to read state and **`useDispatch`** to trigger actions in your components. // src/features/counterSlice.js import { createSlice } from '@reduxjs/toolkit'; const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { increment: (state) => { state.value += 1; }, decrement: (state) => { state.value -= 1; } } }); export const { increment, decrement } = counterSlice.actions; export default counterSlice.reducer; // src/app/store.js import { configureStore } from '@reduxjs/toolkit'; import counterReducer from '../features/counterSlice'; export const store = configureStore({ reducer: { counter: counterReducer } }); // src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import { Provider } from 'react-redux'; import { store } from './app/store'; import App from './App'; ReactDOM.createRoot(document.getElementById('root')).render( ); // In a component import { useSelector, useDispatch } from 'react-redux'; import { increment, decrement } from './features/counterSlice'; function Counter() { const count = useSelector((state) => state.counter.value); const dispatch = useDispatch(); return (

Count: {count}

); } export default Counter;

How would you setup RTK in your React project?

How would you setup RTK in your React project?

Scenario Questions

Follow-up Questions