How to Use Redux in React Native: Simple Guide

To use Redux in React Native, install redux and react-redux, create a store with reducers, wrap your app in a Provider, and connect components using useSelector and useDispatch. This setup helps manage app state globally and predictably.

Syntax

Redux in React Native involves these key parts:

• Store: Holds the app state.
• Reducer: A function that updates state based on actions.
• Actions: Objects describing what happened.
• Provider: Makes the store available to components.
• useSelector: Hook to read state from the store.
• useDispatch: Hook to send actions to the store.

javascript

import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

// Reducer function
const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

// Create store
const store = createStore(reducer);

// Wrap app
const App = () => (
  <Provider store={store}>
    {/* Your app components */}
  </Provider>
);

Example

This example shows a simple counter app using Redux in React Native. The count state is stored globally, and a button dispatches an action to increase it.

javascript

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24, marginBottom: 10 }}>Count: {count}</Text>
      <Button title="Increment" onPress={() => dispatch({ type: 'INCREMENT' })} />
    </View>
  );
};

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

export default App;

Output

A screen with text 'Count: 0' and a button labeled 'Increment'. Pressing the button increases the count number by 1 each time.

Common Pitfalls

Common mistakes when using Redux in React Native include:

• Not wrapping the app in Provider, so components can't access the store.
• Mutating state directly in reducers instead of returning new state objects.
• Forgetting to dispatch actions properly, so state never updates.
• Using class components without hooks or connect (legacy), which complicates code.

javascript

/* Wrong reducer mutating state directly */
const badReducer = (state = { count: 0 }, action) => {
  if (action.type === 'INCREMENT') {
    state.count += 1; // Wrong: mutates state
    return { ...state };
  }
  return state;
};

/* Correct reducer returning new state */
const goodReducer = (state = { count: 0 }, action) => {
  if (action.type === 'INCREMENT') {
    return { count: state.count + 1 };
  }
  return state;
};

Quick Reference

Redux in React Native quick tips:

• Install with npm install redux react-redux.
• Create a store with createStore(reducer).
• Wrap your app in <Provider store={store}>.
• Use useSelector to read state.
• Use useDispatch to send actions.
• Reducers must be pure and return new state objects.

Key Takeaways

Always wrap your React Native app in a Redux Provider to share the store.

Use useSelector to read state and useDispatch to send actions in functional components.

Reducers must never mutate state directly; always return new state objects.

Install both redux and react-redux packages before using Redux.

Keep Redux logic simple and predictable for easier state management.