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.

Installation

//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.

src/
store/
actions/
slices/
index.js

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.

JavaScript 101

Google Pie Chart Integration in Laravel 9 Tutorial

Google Pie Chart Integration in Laravel 9 Tutorial

Error Handling with Express-React

Server-Side Rendering

Creating a RESTfull API with Node.js

Eco-Friendly Ecommerce: A Chrome Extension for Tracking your Carbon Footprint

Linked Lists: In Practice

Creating a TypeScript tsconfig for nodejs

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

This Week In React #92: Remix, MDX 2, Lifetime Analysis, Story of React, Quick Start Docs…

A Guide to React Native Array Methods

Important Frequently Ask Questions (FAQs) about React Native in 2022

How to Customize the React TreeView Component