How to add Redux Toolkit into React Native
Tags: reactnative, redux, reduxtoolkit, mobile
Published: 2022-07-27 05:04:18

In this post I wanna share how to add Redux Toolkit into an existing React Native project.

Redux Toolkit is available as a package. Just open your project folder with terminal and use below commands:

If you are using NPM:

```
# NPM
npm install @reduxjs/toolkit
```

or YARN:

```
# Yarn
yarn add @reduxjs/toolkit
```

Now, inside your project folder create a folder named **redux** which will have a file called **store.js**:

![store folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5r1fu6p7ssgg23y12jr.png)
_This is how I created the folder structure. This isn't a convention or anything. It is just my preference._

Inside **store.js** write the following:

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

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

We also need to create a folder for our redux slices. **slices** folder will hold your redux toolkit reducers.


![slices folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6k0vy2fwlisatsap7p1a.png)

For the sake of this post I created a sample userSlice reducer which sets an **id** of a user.

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

const initialState = {
  id: null,
};

// Setting up user slice (redux-toolkit)
// All the magic happens here, lol.
export const userSlice = createSlice({
  name: 'user',
  initialState,
  // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
    setUserId: (state, action) => {
      state.id = action.payload;
    },
  },
});

export const {setUserId} = userSlice.actions;

// The function below is called a selector and allows us to select a value from
// the stateSelectors can also be defined inline where they're used instead of
// in the slice file. For example: `useSelector((state: RootState) => state.counter./// value)`
export const selectUser = state => state.user;

export default userSlice.reducer;
```
Now, we need to import and add the **userSlice** to the redux store which is inside **store.js** file:

```javascript
import {configureStore} from '@reduxjs/toolkit';
import userSlice from './slices/userSlice';

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

```
Redux store is done ✅. Let's add this store to our app, shall we? But before that we need to add **react-redux** library to be able to use redux inside our React Native app.

```
# If you use npm:
npm install react-redux

# Or if you use Yarn:
yarn add react-redux
```

After installing **react-redux**, we need to link our redux store to our React Native. For that you have to add the following code to your **App.js** file:

```javascript
import * as React from 'react';
import {Text, SafeAreaView} from 'react-native';
import {Provider} from 'react-redux';

import {store} from './utils/redux/store';

function App() {
  return (
    <Provider store={store}>
      <SafeAreaView>
        <Text>Hello World</Text>
      </SafeAreaView>
    </Provider>
  );
}

export default App;

```
Congratulations 👏! You have successfully linked the redux store to your React Native app 🔥.

Now, you can read more about how to use your reducer (or slice in redux-toolkit) at the Redux Toolkit docs which I will leave a link.

[Redux Toolkit Quick Start link](https://redux-toolkit.js.org/tutorials/quick-start)

Thanks for reading! If you have any questions leave in the comments.