Mastering Redux : Seamless UI Updates in React Native Apps

State management in React Native implements redux to save, update and reflect changes in UI. Let’s understand the flow of React Native Application which is using Redux.

Folder Structure

your-react-native-app/
├── src/
│ ├── actions/
│ │ └── actions.js
│ ├── components/
│ │ └── MessageComponent.js
│ ├── reducers/
│ │ └── reducers.js
│ ├── store/
│ │ ├── store.js
│ │ └── rootReducer.js
│ └── App.js
└── package.json

Flow of Displaying the Message from the Store

Suppose you have a Redux store with a state that contains a single value, like a message.

Step 1: Create Actions

/** actions.js */

 export const setMessage = (message) => ({
  type: 'SET_MESSAGE',
  payload: message  // payload:'test message' - hardcoded message for debug
});

Step 2: Define a Redux Reducer

/** reducers.js */

const initialState = {
  message: ''
};

export const messageReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
};

Step 3: Create Redux Store

/** store.js */

import { createStore } from 'redux';
import { messageReducer } from './reducers';

const store = createStore(messageReducer);
export default store;

Step 4: Connect React Native Component to Redux store

/** MessageComponent.js */

import React from 'react';
import { connect } from 'react-redux';
import { View, Text } from 'react-native';

const MessageComponent = ({ message }) => (
  <View>
    <Text>{message}</Text>
  </View>
);

const mapStateToProps = state => ({
  message: state.message
});

export default connect(mapStateToProps)(MessageComponent);

Here, the MessageComponent is connected to the Redux store using the connect function from react-redux. The mapStateToProps function maps the message state from the Redux store to the message prop in the component. Whenever the message state changes in the Redux store (due to dispatching SET_MESSAGE action), the MessageComponent automatically re-renders with the updated message. This flow ensures that the UI stays in sync with the Redux store state.

SUMMARY of RETRIEVAL FLOW

State Mapping: The MessageComponent is connected to the Redux store using connect from react-redux.
The mapStateToProps function maps the message field from the Redux store state to the message prop in the MessageComponent.

Prop Passing: The MessageComponent receives the updated message prop from the Redux store.

Component Rendering: The MessageComponent re-renders with the new message prop value. It updates the UI to display the new message, as it’s part of the component’s render method.

Flow of Updating the Message in the Store:

Now, Let say you want to update the message from UI on button click.

Step 1: Action (Remains Unchanged)

/** actions.js */

export const setMessage = (message) => ({
  type: 'SET_MESSAGE',
  payload: message
});

Step 2: Reducer (Remains Unchanged — Already handling the action type received )

/** reducers.js */

const initialState = {
  message: ''
};

export const messageReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
};

Step 3: MessageComponent (Now Handles a button press to update the state of store)

/** MessageComponent.js */

import React from 'react';
import { connect } from 'react-redux';
import { View, Text, Button } from 'react-native';
import { setMessage } from './actions'; // Import action creator

const MessageComponent = ({ message, updateMessage }) => (
  <View>
    <Text>{message}</Text>
    <Button title="Update Message" onPress={() => updateMessage('New Message')} />
  </View>
);

const mapStateToProps = state => ({
  message: state.message
});

const mapDispatchToProps = dispatch => ({
  updateMessage: (message) => dispatch(setMessage(message))
});

export default connect(mapStateToProps, mapDispatchToProps)(MessageComponent);

With this setup, clicking the “Update Message” button in the MessageComponent will dispatch the setMessage action, causing the messageReducer to update the store’s state with the new message. The MessageComponent will automatically re-render with the updated message, reflecting the change in the UI.

Once the store is updated with the new message by the reducer, the Redux store notifies all connected components that subscribed to changes in the relevant parts of the state. These components then re-render to reflect the updated state.

What happens next?

State Change Notification: After the reducer updates the store with the new message, Redux notifies all connected components that are subscribed to changes in the relevant part of the state.

Component Re-render: The connected component (MessageComponent in this case) receives the updated message as a prop from the Redux store.
Since the component’s props have changed, React triggers a re-render of the component.

Updated UI: The component re-renders with the new message received as a prop.
The UI updates to display the new message.
This process ensures that any component connected to the Redux store receives updates automatically when the store state changes. It’s a predictable way of managing state and updating UI across your React Native application.

SUMMARY of UPDATION FLOW

Action Dispatch: An action creator function, such as setMessage, is called from your React Native component. This action creator creates an action object with a type (e.g., ‘SET_MESSAGE’) and a payload (the new message).

Dispatching Action: The action object is dispatched to the Redux store using store.dispatch(action). This action is sent to the reducers to update the state.

Reducer Handling: The reducer (messageReducer) receives the action and checks its type. If the type matches ‘SET_MESSAGE’, the reducer updates the message field in the store’s state with the new message from the action’s payload. The reducer returns a new state object with the updated message.

If you reached here, hope you were able to understand the redux state management.

So, to trace the flow of your react native app following redux, always remember

1. State Initialization: The initial state is defined in the Redux store.
2. Component Initialization: Connected components receive the initial state as props from the store.
3. Action Dispatch: Components can dispatch actions to the store to request changes to the state.
4. Reducer Handling: Reducers process these actions and produce a new state.
5. State Update: The store updates its state with the new state returned by the reducers.
6. Component Re-render: Connected components receive the updated state as props and re-render accordingly.

Thank you for reading!