Using Redux in Sample React Native app

What is Redux?

Redux is a predictable state manager, what predictable state manager does is that it records the state changes by describing as “Actions” and replay it later making state management predictable.

In other words, Redux is a predictable state manager which helps us to write applications that behave consisting which run in different environments, so basically Redux is a state management tools for complex applications.

Redux is inspired by Flux by Facebook and Elm.

Pros and Cons in Redux

pros

• Redux has a large ecosystem of add ons and it is also small in size 2kB with all the dependencies

Another way of saying is that it helps you manage the data you display and how you respond to user actions.

             “Redux makes Data management and debugging easier”

-Dan Abramov (Creator of Redux)

• Uni Directional Architecture

User input is the only way to trigger an action making the app more manageable and also makes it difficult to introduce infinite loops.

• Redux is an agnostic framework meaning it can work with more than one framework.
• Constrains comes with Redux also have a plus side
  • Having a single store rather than many, components rely on one store making it easier to debug, write states locally.
  • State can only be changes by emitting an action describing what happened.
  • Views cannot change the state “Directly”

Actions instruct reducers (functions) to replace the current state with a new state.

Cons

• Redux comes with constrains such as writing more code to get something done which without Redux, we could do with small amount of code.
• Boilerplate design restricts the design of the application
• Can cause security issues because any component can access the data because there is no encapsulation in Redux
• Use excessive memory because the states are immutable and reducers update the state by returning a new state every time.

Confusions regarding Redux

• Redux = Flux

It is not Redux is not Flux but Redux is a modified architecture of Flux. The main difference in Flux and Redux is that Flux has many stores while Redux has only one root store.

• Redux makes applications states easier to manage but it will not make the application fast because of that.

Starting a React Native Applications With Redux

First, we need install react Native using

Then create a React Native Application using

Start the application using either using an actual device or a virtual device

Then install redux using

After that we need to install other dependencies such as React redux

If you come across any errors after this just do a

To show the functionality of Redux I will be creating a basic counter application so here we create a simple counter using few lines of code So for that we need a blank React native view and add a button to it as given below

All the highlighted code is the code we need to create a simple counter with the out of

We don’t need to redux to change the internal state of this application but it will help us to have an understanding of how redux work.

to use Redux first we need to remove code from the App.js and have a different file as a component and import it to App.js so that it will work as before for now

Line 17 is the import of the new page counterApp.js to the App.js file and the component id being used is shown in line 40 as <CounterApp/>

Ps: all the component names should start from a capital letter

After that to store all the states and actions we need a store for that we create a Redux store like

But the store needs a reducer to store actions and pass it so we need to create a reducer as well after the error regarding the reducer is gone

In order for the reducer to modify the state we need access to the initial state

Connecting the store to the react native app we need to import provider from react-redux and wrap the <CounteraApp/> with the <Provider><Provider/> and pass the store to the provider tag

We created the CounterApp component is that to have the store through out the CounterApp. Before giving access to the tore we need to create a function in our counterApp.js file after the counterapp class

Then we need to connect the store to the CounterApp.js page for this we need another import  

To connect the mapStateToProps to CounterApp we need to change the export as below

With that we have establish a connection to the store after this step we can get rid of the state in the CounterApp

After that we need to pass actions to modify the state for this we need another functions with a dispatcher and in that dispatch method we pass the actions of objects with the property of type as below for both increase and decrease of the counter.

Then we need to change the initially created increase and decrease counter in the CounterApp.js file to this.props.increseCounter and this.props.decreaseCounter as below and also change the state of counter in the text field to props

And to finally make this work we need to add the actions to the reducer which we left with just a return statement with a switch statement to match the cases and so the action accordingly like below.

With this switch case we check the relevant type else return the initial state as shown .

Conclusion

Redux reduces the work of data management and also provide us with some debugging tools.

All of this, if your application is complicated only, else it has no point in using Redux in your React Native application.

Redux is made for heavy-duty applications which uses the network heavily to request date for multiple pages instead of using the old data.

Use Redux if props are being forwarded down the app layer.

References (External Links)

https://redux.js.org/introduction/getting-started

https://www.gistia.com/insights/beginners-guide-redux

https://blog.cloudboost.io/getting-started-with-react-native-and-redux-6cd4addeb29

https://www.quora.com/What-is-the-benefit-of-Redux-in-React-Native

https://blog.usejournal.com/why-and-when-to-use-redux-b57f7dae9269