How to integrate redux on a React-Native Application with typescript
By: Isuru Madusanka
Tags: NPM, React Native, Typescript, Redux

Redux + React native / typescript

What is redux

Redux is a global state management tool for the apps which are built on top of the javascript(mostly using in react base applications). It let the components to read the state as well as change the state by dispatching the actions(which we’ll discuss later on the article) and this is somewhat similar to the facebook flux pattern. The takeaway the responsibility of managing single state per component, instead it creates a single store to manage the state globally.

Why redux

Normally in react native base applications, how you communicate between multiple components is, using props. But when the application becomes more complex, It is bit hard to keep above props communication on track. That is where the redux comes in. It allows you to communicate with separate components without passing props through.

Be careful

Even though you are using redux, you have to deal with is on a proper manner, otherwise you’ll ends up with a mess.

If your application contains simple UI changes often, no need to use a complex pattern like redux, but you can go with a simple pattern like “share state between components”

If your application is receiving the data from single data source, no need to go with redux as your application don’t have data inconsistency issues.

The state of the redux is immutable, So a new state will be generated, when you dispatch an action to change it.

How redux

Redux structure

Action

If you want to change a state, that change request should dispatch through the actions

Long thing short

Reducer

When an action dispatched a state change, the reducer’s job is do the necessary change and return back the new state to the application

Hah haa..

Store

The store is the place, which use to store the state of your application with the help of reducer.

Reducer the stock keeper

Well, do we keep multiple stores for a single application ?

Absolutely not, remember the reason why we used redux on your application, to make sure of using single data sources per application. If you used multiple stores, agin you’ll end up with a mess.

View

The UI for the application. This is where the users of your application interact with

the user interaction 😜

Middleware

The final part. There were so many usages of this including asynchronous api call handling

Let’s build a react native mobile app with redux

Use the doc to setup the react environment for your laptop and to install the react native cli on your mashing

Create your application, using the command

npx react-native init MyReduxApp --template react-native-template-typescript

2. Run the app on iOS using the command npm run start

woo hoo you got it run

3. Now go to the project root via your terminal and run below commands to install redux dependencies

npm install react-redux --save

npm install redux --save

npm install redux-thunk --save (this is a middleware, Which will help you to dispatch the actions)

Since you’v created the application with typescript, please install the type checking for redux via below command

npm install @types/react-redux --save-dev

Well done. Now you have installed all the dependancies we need continue our simple redux sample application

Let’s create a simple application

Just remove everything in the App.tsx and add the below code.

we would create only two very basic components here. And It’ll looks like below

2. Now create below directories on you project root.

redux — folder structure

3. Well done you were there, now we are going make our redux layer live 🔥

4. Implementation of the action. Create a file first.action.ts below the actions directory, which we earlier created

The file location

Copy & paste below code in the file

We would create two interfaces here, one to dispatch the payload and the second one to dispatch error if any

Then create the file types.d.ts below src/my-redux , which will contains our payload type SamplePayload

At the end, export the type MainAction , which is the combination of above both actions.

Contains the main types

Only one attribute will be there in the Sample-Payload

5. Now we gonna implement the reducer for the redux layer.

Create two files first.reducer.ts & index.ts below the reducers directory

The first reducer

We would implement the reducer now. Copy and paste below code in your first.reducer.ts file

The reducer

first of all create the main state for the application, which absorbs by the component you want.

Then crate the initial state, which is the default value that displayed at the component initially.

Now in the implementation of reducer, you should return new state based on the action type.

at the end return the reducer.

6. As mentioned earlier, reducer’s job is update the new state at the store and return the new one to the application. To do that there should be a connection between Store and the reducer .

on the way of doing that, as first thing we have to create the root reducer , which will contain all the reducers that you created. Do following at the index.ts at reducers directory

After creating the root reducer, export the type of the root reducer as well as the root reducer

7. Now is the time to implement the store .

Create the file store.ts at the store directory

The store

Copy/Paste above on the file

We need two parameters to create the store. The first one is root reducer which we create earlier. The second one is the thunk the middleware, which we discussed earlier.

At the end export the store.

8. We almost done. Now we going the implement a function to dispatch our state the state.

Add below code at the end of first.action.ts file

9. The final stage. Here we are going to finish the ui interaction part

At the top of the app.tsx file import the Provider , useDispatch and useSelector by react-redux(which we installed earlier via npm)

Then import the store , onDescription and the ApplicationState accordantly

Implementation of Description-Component

Inside the component Description fetch the payload by useSelector

const {description} = useSelector((state: ApplicationState) => state.firstReducer);

And store the value of the payload within the Text component

<Text>{description.value}</Text>

Implementation of the ReduxComponent

At the top of the component create an instance of the useDispatch

const dispatch = useDispatch();

Then inside the TouchableOpacity's onPress action, dispatch our action onDescription

dispatch(onDescription());