Complete Guidance to Create React Native Redux CRUD App Part 2 (redux setup)

In last part we saw how to create react native application, how to structure our project,how to create react native bottom tab navigation.

In this part 2, we are going to see what is redux?, how to configure react native redux setup?.

What is Redux?

Redux is a global state management library that can be used for Javascript apps.

We need to understand 3 things to create react native redux app they are store, action and reducer.

store: Store contains our whole application state. Redux contains only a single store.

action: The only way to change make a change in store object is by creating action and dispatch to store.

reducer: reducer contains the logic for action which dispatched and returns the new state to the store based on logic. The updated state will be available to our entire application.

We can read more about redux on their official website.

Configure React Native Redux Setup

In the previous tutorial, we saw our final project structure. Let’s see it again here

├── src
│   ├── actions
│   │  ├── index.js
│   │  ├── QuoteAction.js
│   │  ├── types.js
│   │
│   ├── components
│   │  ├── MyHeader
│   │
│   ├── navigations
│   │  ├── MainNavigation.js
│   │
│   ├── reducers
│   │  ├── index.js
│   │  ├── QuoteReducer.js
│   │
│   │
│   ├── screens
│   │  ├── HomeScreen.js
│   │  ├── ListQuotes.js
│   │  ├── QuoteForm.js
│   │  ├── SettingsScreen.js
│
├─App.js

In this section, we are going to create a actions and reducers folder.

In actions folder, we will keep all our actions. we keep action in the component itself without the actions folder. But best practice is to keep actions in actions folder and it may help to reuse.

In the reducers folder, we are keeping reducers logic.

First create actions and reducers folder inside src folder.

Inside the actions folder create index.js, QuoteAction.js, and types.js files.

Inside the reducers folder create index.js and QuoteReducer.js files.

├── src
│   ├── actions
│   │  ├── index.js
│   │  ├── QuoteAction.js
│   │  ├── types.js

│   │
│   ├── reducers
│   │  ├── index.js
│   │  ├── QuoteReducer.js

First let’s see how to create action for react native redux app.

Inside index.js file of actions folder paste the below line

export \* from './QuoteAction';

The explanation of above code is we are exporting everything from index.js file. so we can import action inside components from the actions folder itself. It can make easier to access actions.

For example, We have a home screen we need to use action presented in QuoteAction.js without exporting it in index.js file.

import {quoteActionName} from ‘../actions/QuoteAction.js’;

with exporting QuoteAction.js we can import it like

import {quoteActionName} from ‘../actions’;

This method will be helpful when we have many action files.

Inside QuoteAction.js Files paste the below code.

import { SAMPLE_ACTION } from "./types";

export const sampleQuoteAction = () => ({
  type: SAMPLE_ACTION,
});

In the above code, we imported SAMPLE_ACTION from the types.js file. we must create that in types.js

Inside types.js file add below line

export const SAMPLE_ACTION = "SAMPLE_ACTION";

We will see later why we need types.js file.

Let’s see how to work with reducers in react native redux app.

Now go to reducers folder modify the index.js file

import { combineReducers } from "redux";
import QuoteReducer from "./QuoteReducer";

const appReducer = combineReducers({
  QuoteReducer: QuoteReducer,
});

export const rootReducer = (state, action) => {
  return appReducer(state, action);
};

What we are doing in this index.js file is, we are importing reducer, and using combineReducers we are creating a single reducer. Why we are creating single reducer is because redux store only accepts single reducer. we will see later in this tutorial how to create a redux store in react native redux app.

For example, if we have one more reducer called SettingsReducer.js how can we pass it to combineReducers, let’s see

import SettingsReducer from "./SettingsReducer";

const appReducer = combineReducers({
  QuoteReducer: QuoteReducer,
  SettingsReducer: SettingsReducer,
});

We are going to add our first reducer inside QuoteReducer.js file.

import { SAMPLE_ACTION } from "../actions/types";
const INITIAL_STATE = {
  quotes: [],
};
export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case SAMPLE_ACTION:
      return state;

    default:
      return state;
  }
};

Explanation of above code is we are importing SAMPLE_QUOTE type. Create an initial state of QuoteReducer with empty quotes.

We exported Quote Reducer. (state = INITIAL_STATE, action) => { return state} this is the basic syntax of reducer. Every reducer must be passed with 2 parameters one is state and another one is action. Based on the action, the reducer will return a new state.

Why we need types.js file in react native redux app is ,

For type SAMPLEACTION we created in types.js, we used SAMPLEACTION in both action and reducer by just importing this constant variable. we can also use create action and call reducer without a types constant by using Same string at both places. But it will make some problems if you misspelled the word.

See below example we used string at both places.

//Action

export const sampleQuoteAction = () => ({ type: ‘SAMPLE_ACTION’, });

//Reducer

case ‘SAMPLE_ACTION’: return state;

It is best practice to maintain types constant in types.js file and use that constant in both action and reducer.

Let’s create store for our react native redux app.

Go to App.js file modify it with below code

import React from "react";
import { SafeAreaView, Text } from "react-native";
import { Provider } from "react-redux";
import { createStore } from "redux";
import { rootReducer } from "./src/reducers";
import MainNavigation from "./src/navigations/MainNavigation";

const store = createStore(rootReducer);

const App = () => {
  return (
    <Provider store={store}>
      <SafeAreaView style={{ flex: 1 }}>
        <MainNavigation />
      </SafeAreaView>
    </Provider>
  );
};

export default App;

const store = createStore(rootReducer); this line is used to create redux store. Import createStore from redux and pass it with our rootReducer.

we already saw why we are using combineReducers.For example, if we have multiple reducers we cant pass it like

const store = createStore(rootReducer, settingsReducer) this will throw an error. store only accepts one reducer.

Next another one we used is Provider. Which needs to be imported from react-redux, this library helps react native redux work together.

Provider must be passed with the store. Pass the redux store we created earlier. This provider makes Redux Store available to all our components.

Now run your application using

react-native run-android

If the application runs without error then you configured redux successfully in react native.

Conclusion:

In this tutorial we learned basics of redux, how to configure react native redux setup.

use the comment section to ask your doubts.

You can get the code from GitHub using the following command. Github URL is here

https://github.com/mahisat/react-native-redux-example-crud.git

In the next tutorial, we will see how to create a list, create and update pages with redux.