Posted on Jul 27, 2022

How to add Redux Toolkit into React Native

#reactnative #redux #reduxtoolkit #mobile

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;