Redux slices and actions in React Native

Introduction

Redux slices and actions help organize app data and changes in one place. They make managing app state easier and clearer.

When you want to keep track of user login status in your app.

When you need to update a shopping cart after adding or removing items.

When you want to handle app settings like theme or language.

When multiple parts of your app need to share and update the same data.

When you want to keep your code organized and easy to maintain.

Syntax

React Native

import { createSlice } from '@reduxjs/toolkit';

const sliceName = createSlice({
  name: 'sliceName',
  initialState: { key: 'value' },
  reducers: {
    actionName: (state, action) => {
      // update state here
    }
  }
});

export const { actionName } = sliceName.actions;
export default sliceName.reducer;

createSlice creates a slice with state and actions together.

Reducers inside reducers define how state changes when actions run.

Examples

This slice manages a counter number with increment and decrement actions.

React Native

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; }
  }
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

This slice manages a list of todos with actions to add and remove items.

React Native

const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => { state.push(action.payload); },
    removeTodo: (state, action) => {
      return state.filter(todo => todo.id !== action.payload);
    }
  }
});

export const { addTodo, removeTodo } = todoSlice.actions;
export default todoSlice.reducer;

Sample App

This app shows a number that you can increase or decrease by pressing buttons. It uses a Redux slice to manage the number state.

React Native

import React from 'react';
import { View, Text, Button } from 'react-native';
import { configureStore } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; }
  }
});

const store = configureStore({ reducer: counterSlice.reducer });

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

  return (
    <View style={{ padding: 20, alignItems: 'center' }}>
      <Text style={{ fontSize: 24, marginBottom: 10 }}>Count: {count}</Text>
      <Button title="Increment" onPress={() => dispatch(counterSlice.actions.increment())} />
      <View style={{ height: 10 }} />
      <Button title="Decrement" onPress={() => dispatch(counterSlice.actions.decrement())} />
    </View>
  );
};

export default function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

Important Notes

Reducers in createSlice can directly change state because Redux Toolkit uses a tool that handles immutability behind the scenes.

Always export actions and reducer from the slice to use them in your app.

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

Summary

Redux slices group state and actions for easier state management.

Actions are functions that describe how to change state.

Use slices to keep your app data organized and simple to update.