# Setting Up a Redux Toolkit Store

Redux Toolkit (RTK) simplifies the process of setting up and managing a Redux store. This guide will walk you through setting up a store with RTK, ensuring you understand each step and why it’s necessary. By the end, you'll have a fully functional Redux store that you can use in your React applications.

### Introduction to Redux Toolkit

Redux Toolkit is the official, recommended way to write Redux logic. It includes tools and best practices to simplify your Redux code, such as:

* `createSlice` for creating reducers and actions
* `configureStore` for setting up the store with middleware and DevTools
* `createAsyncThunk` for handling async logic

### Installing Redux Toolkit

First, you need to install Redux Toolkit along with React-Redux:

{% tabs %}
{% tab title="npm" %}

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

{% endtab %}

{% tab title="yarn" %}

```bash
yarn add @reduxjs/toolkit react-redux
```

{% endtab %}
{% endtabs %}

### Creating a Slice

A slice is a collection of Redux reducer logic and actions for a single feature of your app. Use the `createSlice` function to define your initial state, reducers, and actions.

```javascript
// features/counter/counterSlice.js

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

const initialState = {
  value: 0,
};

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

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;
```

In this example, we create a `counterSlice` with an initial state and three reducers: `increment`, `decrement`, and `incrementByAmount`.

### Configuring the Store

Next, configure the store using the `configureStore` function. This function simplifies the store setup and automatically includes recommended middleware.

```javascript
// app/store.js

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;
```

Here, we configure the store to use the `counterReducer` created earlier.

### Providing the Store to Your React Application

To use the store in your React application, wrap your app component with the `Provider` component from `react-redux`, passing the store as a prop.

```javascript
// index.js

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

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

This step makes the Redux store available to any nested components that need to access it.

### Using the Store in Your Components

With the store configured and provided to your app, you can now use Redux state and actions in your components. The `useSelector` hook allows you to read data from the store, and the `useDispatch` hook allows you to dispatch actions.

```javascript
// features/counter/Counter.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(2))}>Increment by 2</button>
    </div>
  );
};

export default Counter;
```

In this example, the `Counter` component reads the current counter value from the Redux store and dispatches actions to modify the counter state.

### Conclusion

Setting up a store with Redux Toolkit involves installing the necessary packages, creating slices, configuring the store, and using the store in your React components. Redux Toolkit simplifies the Redux setup and encourages best practices, making your state management code more maintainable and easier to understand.