React Redux Toolkit

Redux Toolkit simplifies Redux development.

Install

```bash npm install @reduxjs/toolkit react-redux ```

Create Store

```javascript import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { increment: (state) => { state.value += 1; }, decrement: (state) => { state.value -= 1; } } });

const store = configureStore({ reducer: { counter: counterSlice.reducer } });

export const { increment, decrement } = counterSlice.actions; export default store; ```

Setup Provider

```javascript import { Provider } from 'react-redux'; import store from './store';

function App() { return ( <Provider store={store}> <Counter /> </Provider> ); } ```

Using in Components

```javascript import { useSelector, useDispatch } from 'react-redux'; import { increment, decrement } from './store';

function Counter() { const count = useSelector((state) => state.counter.value); const dispatch = useDispatch();

return ( <div> <p>Count: {count}</p> <button onClick={() => dispatch(increment())}>+</button> <button onClick={() => dispatch(decrement())}>-</button> </div> ); } ```

Async with createAsyncThunk

```javascript import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUsers = createAsyncThunk( 'users/fetch', async () => { const response = await fetch('/api/users'); return response.json(); } ); ```

Remember

- Use for large apps - Predictable state updates - DevTools support - More boilerplate than Zustand

> Congratulations! Intermediate React completed! Ready for advanced topics!