Redux Toolkit setup in React Native

Introduction

Redux Toolkit helps you manage app data in one place easily. It makes your app organized and predictable.

You want to share data between many screens in your app.

You need to keep track of user actions and app state clearly.

Your app has complex data that changes often.

You want to avoid bugs caused by scattered data updates.

You want a simple way to write Redux code without too much setup.

Syntax

React Native

import { configureStore } from '@reduxjs/toolkit';
import sliceReducer from './sliceFile';

const store = configureStore({
  reducer: {
    sliceName: sliceReducer
  }
});

export default store;

configureStore sets up the Redux store with good defaults.

You add your data logic in sliceReducer which comes from a slice file.

Examples

This example creates a store with a counter slice to manage a number.

React Native

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

export default store;

This example sets up a store with a user slice to manage user info.

React Native

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';

const store = configureStore({
  reducer: {
    user: userReducer
  }
});

export default store;

Sample App

This app shows a number that you can increase or decrease by pressing buttons. It uses Redux Toolkit to keep the number in a central store.

React Native

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

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

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

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

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

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

Important Notes

Always wrap your app in <Provider> to give access to the store.

Use createSlice to write reducers and actions together simply.

Redux Toolkit includes good defaults like Redux DevTools support automatically.

Summary

Redux Toolkit simplifies setting up Redux store and reducers.

Use configureStore to create the store with slices.

Wrap your app in <Provider> to connect Redux.