React Native => Invariant violation on redux-saga migration - react-native

Question

I am getting the below issue when I started to configure with Redux sagas in React native application:
App.js:
import React from 'react';
import AppNavigator from './config/AppNavigator'
import { Provider as PaperProvider } from 'react-native-paper';
import * as Font from 'expo-font'
import { createStore } from 'redux'
import { Provider as ReduxProvider} from 'react-redux'
import InitialReducer from './reducer/Initial-reducer'
const store = createStore(InitialReducer)
export default class App extends React.Component {
componentDidMount() {
Font.loadAsync({
'RobotoBlack': require('./assets/fonts/Roboto/Roboto-Black.ttf'),
'RobotoBold': require('./assets/fonts/Roboto/Roboto-Bold.ttf'),
'RobotoRegular': require('./assets/fonts/Roboto/Roboto-Regular.ttf'),
});
}
render() {
return (
<ReduxProvider store={store}>
<PaperProvider>
<AppNavigator />
</PaperProvider>
</ReduxProvider>
);
}
}
AppNavigator.js
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './../pages/Home';
import InitialDetails from '../pages/LandingPage/initialDetails';
const AppNavigator = createStackNavigator({
Home: {
screen: Home,
navigationOptions: {
header: null,
}
},
InitialDetails: {
screen: InitialDetails,
}
},
{
initialRouteName: 'Home',
});
export default createAppContainer(AppNavigator);
Action
export const USER_INITIAL_INPUT = 'USER_INITIAL_INPUT'
export function updateUserInitialInput (action){
return{
type:USER_INITIAL_INPUT,
action
}
}
Reducer:
import USER_INITIAL_INPUT from './../action/Initial-action'
const initialState = {
userInitalInputFromUser :{
animal : 'tige'
}
}
const InitialReducer = (state = initialState,action) => {
switch(action.type){
case 'USER_INITIAL_INPUT':
return{
...state,
userInitalInputFromUser : action.action
}
default:
return state
}
}
export default InitialReducer
Page where am connecting the Redux.
import React from 'react';
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import {
View,
Text,
ScrollView,
Image,
StatusBar,
StyleSheet,
TouchableOpacity
} from 'react-native';
import {Button } from 'react-native-paper';
// actions
import updateUserInitialInput from './../../action/Initial-action'
import { CommonCSS, initialPageCSS } from '../../Style'
class InitialDetails extends React.Component {
constructor(props) {
super(props)
this.state = {
cookingSkill: 'Beginner',
isVegeterian:false
}
}
static navigationOptions = {
title: "Personalization",
headerStyle: {
backgroundColor: "#fa7776"
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold"
}
};
userInitalInput(whichState,value){
whichState ==='cookingSkill' ?
this.setState({cookingSkill:value}) :
this.setState({isVegeterian:value})
}
render() {
return(
<ScrollView style={CommonCSS.flexContainer}>
<StatusBar backgroundColor="#fa6767" barStyle="light-content" />
{/* Rate your cooking skills */}
<View >
<Text style={initialPageCSS.heading}>Rate your cooking skills!</Text>
</View>
<TouchableOpacity
onPress={this.userInitalInput.bind(this,'cookingSkill','Beginner')}
style={
[initialPageCSS.buttons,
this.state.cookingSkill==='Beginner' ? initialPageCSS.acitveButton : null]
}
activeOpacity={0.5}>
<Image source={require('../../assets/images/avatar.png')} style={initialPageCSS.ImageIconStyle}/>
<Text style={initialPageCSS.TextStyle}> Iam a Beginner </Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.userInitalInput.bind(this,'cookingSkill','Expert')}
style={
[initialPageCSS.buttons,
this.state.cookingSkill==='Expert' ? initialPageCSS.acitveButton : null]
}
activeOpacity={0.5}>
<Image source={require('../../assets/images/avatar.png')} style={initialPageCSS.ImageIconStyle}/>
<Text style={initialPageCSS.TextStyle}> Iam an Expert </Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.userInitalInput.bind(this,'cookingSkill','Professional')}
style={
[initialPageCSS.buttons,
this.state.cookingSkill==='Professional' ? initialPageCSS.acitveButton : null]
}
activeOpacity={0.5}>
<Image source={require('../../assets/images/avatar.png')} style={initialPageCSS.ImageIconStyle}/>
<Text style={initialPageCSS.TextStyle}> Iam a Professional </Text>
</TouchableOpacity>
{/* Rate your cooking skills */}
{/* Are you Vegetarian */}
<View>
<Text style={initialPageCSS.heading}>Are you a Vegetarian!</Text>
</View>
<TouchableOpacity
onPress={this.userInitalInput.bind(this,'isVeg',false)}
style={
[initialPageCSS.buttons,
this.state.isVegeterian ? null : initialPageCSS.acitveButton]
}
activeOpacity={0.5}>
<Image source={require('../../assets/images/avatar.png')} style={initialPageCSS.ImageIconStyle}/>
<Text style={initialPageCSS.TextStyle}> Nope, Show me all Recipes </Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.userInitalInput.bind(this,'isVeg',true)}
style={
[initialPageCSS.buttons,
this.state.isVegeterian ? initialPageCSS.acitveButton : null]
}
activeOpacity={0.5}>
<Image source={require('../../assets/images/avatar.png')} style={initialPageCSS.ImageIconStyle}/>
<Text style={initialPageCSS.TextStyle}> Yes, Hide recipes with meat</Text>
</TouchableOpacity>
<View style = {initialPageCSS.getStartedBtnWrapper}>
<Button
mode="contained"
theme={{
roundness: 5,
width: '90%',
dark: true,
colors: {
primary: '#ec4242',
accent: "#ffffff",
}
}}
contentStyle = {{height:50}}
onPress = {this.props.updateUserInitialInput(this.state)}
>
Get Started
</Button>
</View>
{/* Are you Vegetarian */}
</ScrollView>
);
}
}
InitialDetails.propTypes = {
updateUserInitialInput: PropTypes.func,
userInput : PropTypes.object
}
function mapStateToProps (state) {
alert(JSON.stringify(state))
return{
userInput : state
}
}
// const mapStateToProps = state => ( {
// return{
// userInput : state.userInitalInputFromUser
// }
// } )
const mapDispatchToProps = dispatch => ({
updateUserInitialInput: (userInput) =>
dispatch(updateUserInitialInput(userInput)),
})
export default connect(mapStateToProps, mapDispatchToProps)(InitialDetails)
For now I am not connected with Redux-saga, I am not sure why it throws such an issue in the application. The same approach seems to be working fine in a React application. Can anyone help me fix this issue please?