Redux Api in React Native

Pandiyan Mani

·

Follow

3 min read

·

Mar 28, 2023

--

Listen

Share

what is Redux and why we use it?

Redux is a JavaScript library helps to manage the state of an application. It allows the developer to access the saved data on a centralized place called Store where Modification and saving are performed by action and reducer.

Let jump on to the code first so the first step is to install redux toolkit using the below command

npm install @reduxjs/toolkit react-redux

so next i am going to create a folder named redux inside that lets create a file named store.tsx as you can see on the below image

so inside that store.tsx file we are going to import configureStore from “@reduxjs/toolkit”

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
    reducer: {}
})

configureStore is used for sets up a well-configured Redux store with a single function call, including combining reducers.

So now under App.tsx we need to add this store and wrap wit

import HomeScreen from './src/HomeScreen';
import FavouriteScreen from './src/FavouriteScreen';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Provider } from 'react-redux';
import { store } from './src/redux/store'; // added store which we have created


const Stack = createNativeStackNavigator();
type Props = {}

const App = (props: Props) => {
    return (
    <Provider store={store}> // wrapped provider for all screens and passed store
    <NavigationContainer>
    <Stack.Navigator initialRouteName='ScreenA'>
    <Stack.Screen name='ScreenA' component={HomeScreen}></Stack.Screen>
    <Stack.Screen name='ScreenB' component={FavouriteScreen}></Stack.Screen>
    </Stack.Navigator>
    </NavigationContainer>
    </Provider>

    )
}
export default App

create file called favorite.tsx under redux folder which contain method for addFavorite & removeFavorite and we also have ids that are stored.

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

const favSlice = createSlice({
    name: 'favorites',
    initialState: {
        ids: []
    },
    reducers: {
        addFavorite: (state, action) => {
        state.ids.push(action.payload.id)
    },
        removeFavorite: (state) => {
        state.ids.slice(state.ids.indexOf(action.payload.id), 1)
    }
    }
});

export default favSlice.reducer;
export const addFavourite = favSlice.actions.addFavorite;
export const removeFavorite = favSlice.actions.removeFavorite;

createSlice → A function that accepts an initial state, an object of reducer functions, and a “slice name”, and automatically generates action creators and action types that correspond to the reducers and state.

under ListItemGoal we imported addFavourite and removeFavorite and we used dispatch to start the action.

const favouriteIds = useSelector((state)=> state.favoriteNumber.ids);

//The Above Line gets ids

import { StyleSheet, Text, Dimensions, View, Pressable } from 'react-native'
import { useDispatch, useSelector } from "react-redux";
import {addFavourite,removeFavorite} from '../redux/favorite';


const ListItemGoals = (props) => {

    const favouriteIds = useSelector((state)=> state.favoriteNumber.ids);
    const isFavourtite = favouriteIds.includes(props.name)

    const dispatch = useDispatch();
// Created Dispatch for Triggering actions 
    const deleteGoals = () => {
        if (isFavourtite) {
            dispatch(removeFavorite({id: props.name}))
//using dispatch called removeFavorite Function
        } else {
            dispatch(addFavourite({id: props.name}))
//using dispatch called addFavourite Function
        }
        props.DeleteGoals(props.name)
    }

    var width = Dimensions.get('window').width - 20;
    return (
    <Pressable onPress={deleteGoals} >
    <View style={[styles.viewStyleSheet, { width: width }]}>
    <Text style={[styles.textStyles, { flex: 1 }]}>{props.name}</Text>
    <Text style={[styles.textStyles, { color: 'black' }]}>{isFavourtite ? 'ADDED' : 'ADD TO FAVOURITE'}</Text>
    </View>
    </Pressable>

    )
}

const styles = StyleSheet.create({
    textStyles: {
            fontStyle: 'italic',
            fontSize: 20,
            color: 'white',
            padding: 10
    },
    viewStyleSheet: {
            margin: 5,
            backgroundColor: 'grey',
            borderRadius: 10,
            flexDirection: 'row'
    }
})
export default ListItemGoals;

Final Output will be looking like below:

Screen1 Selecting favorite:

Screen 2 which display added Favorite from Screen1:

Final GitHub Source Code:

https://github.com/Pandiyanmk/Redux-React-Api