What You'll Learn

• How to manage state in React Native using Redux Toolkit and React Redux

To follow this blog, you'll need:

• Some experience using React Native as well as Hooks, Navigation, Core Components, and APIs.
• Familiarity with ES6 syntax and features
• Understanding of Redux terms and concepts

Introduction

Welcome to the Redux Toolkit React Native Quick Start tutorial! This tutorial will briefly show how to use Redux Toolkit and React Redux to manage state in React Native. if you want to jump straight to the code, you can run the following command in your terminal:

expo init my-app --template react-native-redux-template

you can alson check this template on GitHub

Installation

Add the Redux Toolkit and React-Redux packages to your project:

If you are using npm

npm install @reduxjs/toolkit react-redux

If you are using yarn

yarn add @reduxjs/toolkit react-redux

Create Slice

Let's imagine that we are building a Reminders app and we want to make the reminders available to the AddReminderScreen.js and the HomeScreen.js.

We need to use createSlice to define our Reminders logic. Inside of your /src folder create another folder called features, inside features create another folder called reminders and finally create a remindersSlice.js file.

We recommend putting as much as the logic for a given feature as possible into a single file, we typically refer to this as a "Slice File" because it represents the logic in the data for one Slice of your redux state.

Redux does not care about your file structure however we recommend separate folders per feature. See Redux FAQ: Code Structure for extended details on file structure.

import { createSlice } from "@reduxjs/toolkit";
 
//initial state for this slice
const initialState = {
  reminders: [],
};
 
//here we define the slice that contains the reducer logic
export const remindersSlice = createSlice({
  name: "reminders",
  initialState,
  reducers: {
    setReminders: (state, action) => {
      state.reminders = action.payload;
    },
    addReminder: (state, action) => {
      state.reminders.push(action.payload);
    },
    deleteReminder: (state, action) => {
      state.reminders = state.reminders.filter(
        (reminder) => reminder.id !== action.payload,
      );
    },
  },
});
 
//finally, we export the actions and the reducer
export const { setReminders, addReminder, deleteReminder } =
  remindersSlice.actions;
export default remindersSlice.reducer;

Create a Redux Store

Once we have our slice file, we need to create a redux store.

import { configureStore } from "@reduxjs/toolkit";
import remindersReducer from "./remindersSlice";
 
export const store = configureStore({
  reducer: {
    reminders: remindersReducer,
  },
});

Adding the React Redux Provider

The <Provider> component makes the Redux store available to any nested components that need to access the Redux store.

In the example below, we added the <Provider> to the <App> since it is at the very top of our component hierarchy.

import Home from "./src/screens/Home";
import { Provider } from "react-redux";
import { store } from "./src/app/store";
 
export default function App() {
  return (
    <Provider store={store}>
      <Home />
    </Provider>
  );
}

Additional considerations when initializing the app

In some cases, you could need access to the Redux store in the <App> component but since we are adding the Provider inside the <App> we can not access the store within the <App>. In the example below we show how to solve this by creating an <AppWrapper> which contains the <Provider> and the <App>.

import { View, Text } from "react-native";
import { Provider } from "react-redux";
import { store } from "./src/app/store";
import { useSelector } from "@reduxjs/toolkit";
 
export default function AppWrapper() {
   <Provider store={store}>
      <App>
   </Provider>
}
 
function App() {
  const count = useSelector((state) => state.counter.count);
  return (
      <View>
        <Text>Counter value: {count}</Text>
      </View>
  );
}

Further Resources

• See the Redux Toolkit TypeScript Next.js Example for how to integrate Next.js with Redux Toolkit.
• See the Create React App/Vite Example for how to integrate React/Vite with Redux Toolkit.

Thanks for reading!

Go back blog.