DEV Community

Cover image for Implementing Redux and Redux-Thunk in a React Native Application
Amit Kumar
Amit Kumar

Posted on • Updated on

Implementing Redux and Redux-Thunk in a React Native Application

When building complex React Native applications, managing state efficiently becomes crucial. Redux, a popular state management library, along with Redux-Thunk for handling asynchronous actions, provides a powerful solution. In this guide, we'll walk you through setting up Redux and Redux-Thunk in a React Native project.

Prerequisites

Ensure you have the following packages installed in your React Native project:



"react-redux": "^9.1.2",
"redux": "^5.0.1",
"redux-thunk": "^3.1.0"



Enter fullscreen mode Exit fullscreen mode

Step 1: Set Up the Store

Create a store folder in the root directory of your project. Inside this folder, create two files: configStore.js and rootReducer.js.

configStore.js
This file configures the Redux store and applies middleware.



// store/configStore.js
import { createStore, applyMiddleware, compose } from 'redux';
import { thunk } from 'redux-thunk';
import rootReducer from './rootReducer';
import Reactotron from './ReactotronConfig'; // Optional, if you are using Reactotron for debugging

const middleWare = applyMiddleware(thunk);

const store = createStore(
  rootReducer,
  compose(middleWare, Reactotron.createEnhancer()) // Remove Reactotron if not using
);

export default store;



Enter fullscreen mode Exit fullscreen mode

rootReducer.js
This file combines all the reducers.



// store/rootReducer.js
import { combineReducers } from 'redux';
import inputValueReducer from './Home/reducer';

const appReducer = combineReducers({
  inputValueReducer,
});

const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    state = undefined;
  }
  return appReducer(state, action);
};

export default rootReducer;



Enter fullscreen mode Exit fullscreen mode

Step 2: Create Actions, Constants, and Reducers

Next, create folders and files for actions, constants, and reducers.

Create the following directory structure inside the store folder:



store/
  Home/
    action/
      index.js
    constant/
      index.js
    reducer/
      index.js



Enter fullscreen mode Exit fullscreen mode

Actions
Define your actions in store/Home/action/index.js.



// store/Home/action/index.js
import { TEST_NAME } from '../constant';

export const addValue = (text) => ({
  type: TEST_NAME,
  payload: text,
});



Enter fullscreen mode Exit fullscreen mode

Constants
Define your action types in store/Home/constant/index.js.



// store/Home/constant/index.js
export const TEST_NAME = 'TEST_NAME';



Enter fullscreen mode Exit fullscreen mode

Reducers
Handle the state changes in store/Home/reducer/index.js.



// store/Home/reducer/index.js
import { TEST_NAME } from '../constant';

const initialState = {
value: '',
};

const inputValueReducer = (state = initialState, action) => {
switch (action.type) {
case TEST_NAME:
return {
...state,
value: action.payload,
};
default:
return state;
}
};

export default inputValueReducer;

Enter fullscreen mode Exit fullscreen mode




Step 3: Integrate Redux with React Native Components

Now, let's integrate Redux with a React Native component.

Home Screen
Create or modify a screen component to dispatch actions and read state from the Redux store.



// screens/Home.js
import React, { useState } from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { TEST_NAME } from '../../store/Home/constant';

const Home = ({ navigation }) => {
const [value, setValue] = useState('');
const text = useSelector((state) => state.inputValueReducer.value);
const dispatch = useDispatch();

return (
<View style={styles.container}>
<Text onPress={() => navigation.navigate('Profile')}>Home</Text>
<TextInput value={value} onChangeText={(text) => setValue(text)} style={styles.input} />
<Button
title='Send'
onPress={() => {
dispatch({ type: TEST_NAME, payload: value });
}}
/>
<Text>{text}</Text>
</View>
);
};

export default Home;

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
input: {
borderColor: 'gray',
borderWidth: 1,
padding: 10,
marginBottom: 10,
width: '80%',
},
});

Enter fullscreen mode Exit fullscreen mode




Step 4: Wrap Your Application with the Provider

Finally, wrap your application with the Provider component from react-redux to make the Redux store available to your entire app.



// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store/configStore';
import Home from './screens/Home';

const App = () => {
return (
<Provider store={store}>
<Home />
</Provider>
);
};

export default App;

Enter fullscreen mode Exit fullscreen mode




Conclusion

By following these steps, you've successfully integrated Redux and Redux-Thunk into your React Native application. This setup provides a scalable architecture for managing state and handling asynchronous operations, making your application more robust and maintainable.

Top comments (0)