Hello, React native developers, what’s going on. Today I am going to demonstrate how we can create a Simple Counter App using Redux in React native through Simple Counter App using Redux React Native Tutorial.
The final result of The Simple Counter App using Redux React Native Tutorial:
Guys, now you have a basic idea about this tutorial by checking the above image. So, Let’s get started…
Step – 1: Install the following required modules:
- @react-navigation/native (version – 5.8.0 at the time of the creation of this post).
- @react-navigation/stack (version – 5.10.0 at the time of the creation of this post).
- react-native-gesture-handler (version – 1.8.0 at the time of the creation of this post).
- react-native-reanimated (version – 1.13.1 at the time of the creation of this post).
- react-native-safe-area-context (version – 3.1.8 at the time of the creation of this post).
- react-native-screens (version – 2.12.0 at the time of the creation of this post).
- react-native-vector-icons (version – 7.1.0 at the time of the creation of this post).
- redux (version – 4.0.5 at the time of the creation of this post).
- react-redux (version – 7.2.2 at the time of the creation of this post).
Step – 2: Now create the following folder and files structure:
- Create a folder named /src in the root.
- Create a folder named CounterUsingRedux(under src) contains the following 3 files.
- CounterUsingRedux.js: This file is responsible to hold the basic UI of our App.
- FloatingButton.js: Will contain the implementation of the Floating Button component.
- index.js: Will hold redux setup, navigation setup related stuff.
- Create a folder structure modules/redux/counter(under src – related to redux actions, reducers stuff) contains the following 4 files:
- types.js: Will contain the constant TYPES related to our counter reducer. We’ll use these types in actions and reducer later on.
- actions.js: Will contain the implementation for actions. These actions will responsible for increment and decrement of the counter.
- reducer.js: Will responsible for containing the state for our counter reducer and a pure function that would be responsible to update the state for the counter in redux.
- index.js: Simply having the import and export statements for actions & reducer.
Step – 3: Write code for App.js file:
Step – 4: Implementation for /src/CounterUsingRedux/index.js file:
- On line no. 5, You can see the import statement for createStore and combineReducers from the redux package which we have installed in the 1st step. Basically, the createStore function is responsible to create the Redux store for our app and createStore takes a list of parameters and reducer is one of them.
- combineReducers function is responsible to combine multiple reducers into one. In this tutorial, we have a single counter reducer.
- From import statement on line no. 9, Provider is kind of a wrapper that is responsible to make the redux store accessible to our app.
- As you can see in line no. 22, I am using the combineReducers function to combine our app reducers(counter in our case).
- On line no. 26, I am using the createStore function to create the store and pass our rootReducer variable as param.
- Then on line no. 32, Wrap our app by using the Provider component and pass the store as a prop to make the redux store accessible to our app.
- On line no. 38, pass our CounterUsingRedux component as a component prop to Stack.Screen.
Step – 5: Implementation for /src/CounterUsingRedux/CounterUsingRedux.js file:
- On line no. 7, I am importing useSelector and useDispatch hooks from the react-redux package.
- useSelector hook is responsible to fetch the specific reducer’s state from the store. As you can see in line no. 22, I am fetching the counter state from our custom counter reducer.
- useDispatch hook allows us to dispatch actions(Such as increment & decrement) to reducers. On line no. 23, getting the redux store’s dispatch function and assign it to the variable named dispatch. Using this dispatch, we would be responsible to fire the actions. As you can notice on lines no. 31 & 38.
- On line no. 16, importing increment & decrement actions.
Step – 6: Implementation for /src/CounterUsingRedux/FloatingButton.js file:
Step – 7: Implementation for /src/modules/redux/counter/types.js file:
- Variables declared in the types.js file are nothing special, they are simply constants which would be used for comparison. Means when we fire actions then action objects would have a key named type which uses for comparison in reducer to decide which block of code should be executed. Don’t worry, we’ll check this in our next steps.
Step – 8: Implementation for /src/modules/redux/counter/actions.js file:
- Actions are just plain objects which would take type and payload as object keys. type denotes the type of action means in our case increment & decrement.
- As you can see in the above block of code there are two custom actions named increment & decrement related to our counter reducer and they are just plain objects having type key.
- When these actions will fire from any of our components then based on this type key we’ll decide which block of code should be executed.
Step – 9: Implementation for /src/modules/redux/counter/reducer.js file:
- First of all, reducers are pure functions. This means we must not perform any side effects such as API calls, timer, the interval in reducer functions. Actions are the best place for these types of requirements.
- On line no. 6, we have the initial state(variable named INITIAL_STATE) for our counter reducer.
- As you can see in line no. 11, A switch statement with action.type parameter based on which we’ll decide which case block should be executed. Reducers are responsible to update the state of the store.
Step – 10: Implementation for /src/modules/redux/counter/index.js file:
That’s all Guys, have fun & be safe.