Redux in react native

 Step 1

Install the packages

 -npm install @reduxjs/toolkit react-redux

Step 2

Create a store by creating store.js file

paste that default code inside that file

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({

  reducer: {},

})

Step 3

Now wrap your application around with  <provider> by react-redux

Go Inside your App.js file 

import { Provider } from 'react-redux';

import { store } from "./store";

Now use that provider and store like so

<NavigationContainer>

      <Provider store={store}>

          <Stack.Navigator>

            <Stack.Screen name='home' component={HomeScreen} />

            <Stack.Screen name='restaurant' component={RestaurantScreen} />

          </Stack.Navigator>

      </Provider>

    </NavigationContainer>

Step 3

Create a redux state slice e.g baskitSlice inside feature folder

import { createSlice } from '@reduxjs/toolkit'

const initialState = {

  items: [],

}

export const basketSlice = createSlice({

  name: 'basket',

  initialState,

//   reducer actually an actions that allow us to modify global state

  reducers: {

    addToBasket: (state, action) => {

      // Redux Toolkit allows us to write "mutating" logic in reducers. It

      // doesn't actually mutate the state because it uses the Immer library,

      // which detects changes to a "draft state" and produces a brand new

      // immutable state based off those changes

      state.items = [...state.items, action.payload]    

    },

    removeFromBasket: (state, action) => {

      state.value -= 1

    },

   

  },

})

// Action creators are generated for each case reducer function

export const { addToBasket, removeFromBasket, } = basketSlice.actions

export default basketSlice.reducer

Step 4

Create a selector that allow us to select specific state, let say basket state from global state

/*

Now creating a selector that allows us to access global store.

pull your item from the basket state

This is your initial state or data in you state.

*/

export const selectBasketItems = (state) => state.basket.items;

Step 5

Connect this basketSlice to global store(state).

Go to the store file and combine all slices to make big store

import { configureStore } from '@reduxjs/toolkit'

import basketReducer from './features/basketSlice'

export const store = configureStore({

    /*

        so what i have done here,

        I combine basketSlice with the global store,

        You can add multiple slice in your reducer object.

    */

  reducer: {

    basket: basketReducer,

  },

})

Step 6

How to add item to state. we are going to add item into basket for that, 

1) first create a function that will be call on onPress event.

2) Import useDispatch hook from react-redux to call action on redux

example code

import { useDispatch, useSelector } from "react-redux";

import { addToBasket, selectBasketItems } from "../features/basketSlice";

const items = useSelector(selectBasketItems);

    /*

    useDispatch is a hook of redux to call/pass action

    in redux

    */

    const dispatch = useDispatch();

    const addItemToBasket = () => {

        dispatch(addToBasket({

            id,

            name,

            description,

            price,

            image

        }));

    }

    <TouchableOpacity onPress={addItemToBasket}>

        <PlusCircleIcon

        color="#00CCBB" size={30} />

    </TouchableOpacity>