How to add Redux Toolkit into React Native

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:

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:

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.

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

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:

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:

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

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