Redux in React Native

As React Native applications grow, managing shared state across deeply nested components becomes difficult. Redux simplifies this by centralizing the application state, making data access and updates consistent and predictable.

• Eliminates prop drilling by providing a single global store.
• Enables easy state sharing across components at different levels.

Redux

Redux is a state management library for React and React Native that centralizes application state into a single, predictable store, making complex state interactions easier to handle and debug as apps grow.

• Maintains a single source of truth for the entire application state.
• Ensures predictable state updates through strict, well-defined data flow.
• Improves scalability and debuggability for large and complex applications.

Core Concepts of Redux

Redux uses a few core concepts to manage application state in a clear and predictable manner.

1. Store

The store is the single source of truth that holds the entire state of your application.

• Centralized location for all application data.
• Stores state as a plain JavaScript object.

2. Actions

Actions describe what change should occur in the application state.

• Plain JavaScript objects with a type field.
• Dispatched to the store to initiate state updates.

3. Reducers

Reducers define how the state changes in response to actions.

• Pure functions with no side effects.
• Return a new state based on current state and action.

4. Dispatch

Dispatch is the mechanism used to send actions to the Redux store.

• Triggers reducers to handle the action.
• Initiates the state update process.

5. Selectors

Selectors are used to read specific data from the Redux store.

• Improve state access efficiency.
• Promote reusable and maintainable state queries.

Using Redux in React Native

Redux helps manage and share application state efficiently in React Native apps by providing a centralized and predictable state management approach.

1. Install Redux

npm install redux react-redux

2. Create Actions

Actions define what should happen in the application by describing state changes.

// actions.js
export const incrementCounter = () => ({
  type: 'INCREMENT_COUNTER',
});

• Returns a plain JavaScript object describing the action
• Uses a type field to identify the state change

3. Create Reducers

Reducers define how the application state changes in response to actions.

// reducers.js
const initialState = {
  counter: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return { ...state, counter: state.counter + 1 };
    default:
      return state;
  }
};

export default counterReducer;

• Initializes the default state for the counter.
• Updates state immutably based on the action type.

4. Create Store

The store holds the entire application state and connects reducers to the app.

// store.js
import { createStore } from 'redux';
import counterReducer from './reducers';

const store = createStore(counterReducer);

• Creates a centralized Redux store.
• Registers the reducer that controls state updates.

5. Wrap App with Provider

The Provider makes the Redux store available to all components in the app.

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

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

export default App;

• Injects the Redux store into the React component tree.
• Allows any nested component to access the store.

6. Connect Components

Connecting components allows them to read state and dispatch actions.

// CounterComponent.js
import React from 'react';
import { connect } from 'react-redux';
import { incrementCounter } from './actions';

const CounterComponent = ({ counter, incrementCounter }) => {
  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

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

export default connect(mapStateToProps, { incrementCounter })(CounterComponent);

• mapStateToProps maps Redux state to component props.
• connect binds state and actions to the component automatically.