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"

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;

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;

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

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,
});

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

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

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;

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%',
  },
});

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;

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.