Redux Tutorial with Firebase firestore example. Tutorial Link: https://medium.com/@ibjects/tutorial-redux-and-react-redux-from-scratch-28249ee914e7

actions.js

// export const INCREMENT = 'counter/increment';
// export const DECREMENT = 'counter/decrement';
export const FETCH_ALL_SERIES = 'series/fetchAll';

App.js

import React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Home from './src/screens/Home';
import ReduxExample from './src/screens/ReduxExample';

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { rootReducer } from './src/utils/redux/reducers';

const Stack = createStackNavigator();

function App(props) {
    return (
    <Provider store={store}>
      <NavigationContainer theme={SukhanTheme}>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="ReduxExample" component={ReduxExample} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

export const store = createStore(rootReducer);
export default App;

Home.js

import React, { useEffect } from 'react';

import { View, Button, Alert } from 'react-native';

import firestore from '@react-native-firebase/firestore';

import { FETCH_ALL_SERIES } from '../utils/redux/actions';
import { useDispatch } from 'react-redux';

function Home(props) {

    const dispatch = useDispatch();
  
      function getAllSeries() {

        firestore().collection('Series').get().then((queySnap) => {
            // console.log(queySnap.docs); // [{}, {}]
            // This is where we should update the redux
            // This is also where you'll update the state as per your own UI
            dispatch({ type: FETCH_ALL_SERIES, payload: queySnap.docs });
        }).catch((e) => {
            console.log('User does not exists: ' + e);
        })
    }
  
      useEffect(() => {
        getAllSeries()
    }, [])
  
      return (
        <View>
            <Button title='Press Me' onPress={props.navigation.navigate("ReduxExample")} />
        </View>
    );
}

export default Latest;

reducers.js

import { FETCH_ALL_SERIES } from "./actions";

const InitialState = { allSeriesData: [] }

function rootReducer(state = InitialState, action) {

    switch (action?.type) {
        case FETCH_ALL_SERIES: return { ...state, allSeriesData: action.payload }
        default: return state;
    }
};

export { rootReducer };

ReduxExample.js

import React from 'react';
import { View, Text, Button } from 'react-native';

import { FATCH_ALL_SERIES } from '../utils/redux/actions';

import { useSelector } from 'react-redux'
import { rootReducer } from '../utils/redux/reducers';

function ReduxExample(props) {

    const selector = useSelector(rootReducer);

    return (
        <View>
            <Text>Firebase & Redux Example</Text>
            <Text>Value retrived fom redux is: {JSON.stringify(selector.allSeriesData[0]._data.series_name)}</Text>
        </View>
    );
}

export default ReduxExample;