Installing Redux in a React Native App(Expo Based)

What is Redux?

Redux is a predictable state container for JavaScript apps. It is tiny (only 2kB), but has lots of addons in its ecosystem.


//Redux Toolkit
npm install @reduxjs/toolkit
// Redux
npm install redux redux-thunk react-redux

The file structure of Redux

We need to create a store that is in a directory where the src folder is located. Also, we need to create actions and slices folders and index.js file inside of the store folder just created. So, our file structure must be shown below.


Creating First Slice

To manage the state of UI(User Interface), we need to create a file in the slices folder. And the file will be shown below.

Understanding the code above

createSlice function takes those parameters

  • initialState: The initial state value of the slice
  • name: The name of the slice
  • reducers: To manage our state, we can create some functions for it. And these functions take to parameters which are state and action. With the state parameter, we can read and update our state. With the action parameter, we can access parameters that are sent to this reducer function.

Creating The Slice

To access our slices in our app, we need to create a store with redux. Our store will be located in store/index.js

Understanding the code above

We need to use the combineReducers to combine our slices’ reducers because we will create new slices in the future.

To configure the store we need to send our reducer, we need to use the configureStore function. And we need to export it.

Wrapping The App With Redux

To access the store we need to wrap our App.js with Provider from react-redux and import our store from the store folder. After changing the App.js file. Then we can access slices in the entire app.

Accessing The State from A Screen or A Component

Changing The State from A Screen or A Component




Love podcasts or audiobooks? Learn on the go with our new app.

Variable length currying in JavaScript

7 Most Important Algorithm in JavaScript.

ECMAScript — ES6

Building State Based Swipe-In Animations in React

Making the most out of up-skilling: An Elm Case Study — Part IV

A common sense explanation of JavaScript array methods

Pre-rendering in Next.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Raşit Çolakel

Raşit Çolakel

More from Medium

Dynamic fields in a form using react.js | react-native | add/delete input fields

Dynamic Fields in a form using react.js | react-native

Configuring Absolute Imports in React and React Native with Typescript

How to create a reusable input component with custom mask in react native

Introduction to React Native Reanimated