Bug that I can't understand and fix in React Native - reactjs

Question

To put in context I am building an app as an exercise in a course to program in react native and we are learning Redux
For me everything is fine but I have doubts in two parts in the index of the scene where the application is seen in this case welcome / index.js there is a line that is for 'useSelector' and another is in the reduce of recipe that if the data is well linked because it throws me an error.
"ERROR TypeError: undefined is not an object (evaluating 'store.getState')"
I share the different components of the redux.
Everything is in a store folder and everything is modulated
store/reduce
store/reduce/index.js
import { combineReducers, createStore } from "redux";
import { recipesReducer } from "./reducer";
const rootReducer = combineReducers({
recipes: recipesReducer
});
export default createStore(rootReducer);
store/reducer/recipes.reducer.js
import {recipeTypes} from '../types';
import {recipes} from '../../data';
const { SELECT_RECIPE } = recipeTypes;
const initialState = {
recipes: recipes,
selectedRecipe: null
}
const recipesReducer = (state = initialState, action) => {
switch(action.type) {
case SELECT_RECIPE:
const indexRecipe = state.recipes.findIndex(
(recipe) => recipe.id === action.recipeId
);
if(indexRecipe === -1) return state;
return {
...state,
selectedRecipe: state.recipes[indexRecipe]
}
default:
return state;
}
}
export default recipesReducer;
store/reduce/index.js
export {default as recipesReducer} from './recipes.reducer';
store/types/index.js
export * from './recipes.types';
store/types/recipes.type.js
export const recipeTypes = {
SELECT_RECIPE: 'SELECT_RECIPE',
}
store/action/recipes.action.js
import { recipeTypes } from '../types';
const { SELECT_RECIPE } = recipeTypes;
export const selectRecipe = (id) => {
return {
type: SELECT_RECIPE,
recipeId: id,
};
}
store/action/index.js
export * from './repice.action';
welcome/index
import {Button, CardsRecipes, MenuAlt, Pickers, TT} from '../../components';
import { FlatList, StyleSheet, Text, View } from 'react-native';
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Color from '../../constants/colors';
import { recipe } from '../../data';
import { selectRecipe } from '../../store/action';
const Welcome= ({navigation, route}) => {
const dispatch = useDispatch();
const recipe = useSelector(state => state.recipe.recipe);
const onSelected = (item) => {
dispatch(selectRecipe(item.id));
navigation.navigate('Recipe');
}
const renderItem = ({item}) => <CardsRecipes item={item} onSelected={onSelected(item)} />
return (
<View style={styles.container}>
<MenuAlt title = {'Recetas'} />
<View style={styles.textContainer}>
<Text style= {styles.text}>Bienvenido a la App de Recetas de Cocina</Text>
</View>
<View style = {styles.buttonContainer}>
</View>
<FlatList
data= {recipe}
renderItem = {renderItem}
keyExtractor = {item => item.id}
/>
</View >
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Color.primary,
color: Color.letter,
fontFamily: 'Lato-Regular',
},
textContainer: {
alignItems: 'center',
justifyContent: 'center',
},
text: {
color: Color.letter,
fontSize: 20,
fontWeight: 'bold',
marginTop: 10,
marginBottom: 10,
},
buttonContainer: {
width: '100%',
alignItems: 'center',
marginTop: 10,
marginBottom: 10,
height: 33,
},
});
export default Welcome;
app.js
import {ActivityIndicator, StyleSheet, View} from 'react-native';
import React, { useState } from 'react';
import AppNavigator from './navigation';
import Color from './constants/colors';
import { Provider } from 'react-redux';
import { StatusBar } from 'expo-status-bar';
import { store } from './store';
import { useFonts } from 'expo-font';
export default function App() {
//useState
const [selected, setSelected] = useState(false);
const [order, setOrder] = useState([]);
//funciones
const [loaded] = useFonts({
'Lato-Regular': require('./assets/fonts/Lato-Regular.ttf'),
'Lato-Bold': require('./assets/fonts/Lato-Bold.ttf'),
'Lato-Light': require('./assets/fonts/Lato-Light.ttf'),
'Lato-Italic': require('./assets/fonts/Lato-Italic.ttf'),
'Lato-Black': require('./assets/fonts/Lato-Black.ttf'),
});
if(!loaded) {
return (
<View style={styles.containerLoader}>
<ActivityIndicator size="large" color={Color.letter} />
</View>
)
}
const onSelectedEnlarge = ( select, order ) => {
setOrder(order)
setSelected(select);
};
/*
let content = <Super onSelectedEnlarge={onSelectedEnlarge} object = {order}/>;
if (!selected) {
content = <Super onSelectedEnlarge={onSelectedEnlarge} object = {order}/>;
}
else
{
content = <ListSuper onSelectedEnlarge={onSelectedEnlarge} object = {order}/>;
}
*/
return (
<Provider store={store}>
<AppNavigator/>
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Color.primary,
color: Color.letter,
fontFamily: 'Lato-Regular',
},
});
thanks for your help