Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unrecognized event React Native Redux

I am new on redux. I am using redux with react-native. I just created a simple app that has RGB colour stored on redux and I am using and updating state with a component. The output is fine but I am getting with error on my cmd window. I am using Expo-CLI. enter image description here

Code of my app is here App.js

import React from 'react';
import { View } from 'react-native';
import reducer from './src/reducers/Index'
import {Provider} from 'react-redux'
import {createStore} from 'redux'
import ColorTile from './src/component/ColorTile.js'
const store=createStore(reducer)
export default function App() {
  return (
    <Provider store={store}>
      <View style={{flex:1,justifyContent:"center",alignItems:'center'}}>
          <ColorTile />
      </View>
    </Provider> 
  );
}

Index.js code

import {combineReducers} from 'redux'
import rgbReducer from './rgbReducer'

const allReducer=combineReducers({
      rgb:rgbReducer
})
export default allReducer

export function Increment_red(){
      return {
            type:'Increment_red'
      }
}
export function Decrement_red(){
      return{
            type:'Decrement_red'
      }
}
export function Increment_green(){
      return {
            type:'Increment_green'
      }
}
export function Decrement_green(){
      return{
            type:'Decrement_green'
      }
}

export function Decrement_blue(){
      return{
            type:'Decrement_blue'
      }
}
export function Increment_blue(){
      return {
            type:'Increment_blue'
      }
}

rgbReducer.js code (reducer code)

const color={red:34,green:89,blue:64}
const no=10;
export default function(state=color,action){
      switch(action.type){
            case 'Increment_red':
                return  {...state,red:state.red+no} 
            case 'Decrement_red':
                 return {...state,red:state.red-10}
            case 'Increment_green':
                  return  {...state,green:state.green+no}
            case 'Decrement_green':
                  return  {...state,green:state.green-no}
            case 'Increment_blue':
                  return  {...state,blue:state.blue+no}
            case 'Decrement_blue':
                  return  {...state,blue:state.blue-no}
            default:
                  return state;

      }
}

colorTile.js code (Component where I am using reducer)

import React from 'react'
import {View,Text,Button} from 'react-native'
import {useDispatch,useSelector} from 'react-redux'

const ColorTile=()=>{
      const color=useSelector(state=>state.rgb)
      const dispatch=useDispatch()
      const red=color.red
      const green=color.green
      const blue=color.blue
      return(
            <View>
                  <View style={{backgroundColor:`rgb(${red},${green},${blue})`,height:200,width:200}}>
                  </View>
                  <Button 
                        title='incerase red'
                        onPress={()=>dispatch({type:'Increment_red'})}
                  />
                  <Button 
                        title='Decerase red'
                        onPress={()=>dispatch({type:'Decrement_red'})}
                  />
                  <Button 
                        title='incerase Green'
                        onPress={()=>dispatch({type:'Increment_green'})}
                  />
                  <Button 
                        title='Decerase Green'
                        onPress={()=>dispatch({type:'Decrement_green'})}
                  />
                  <Button 
                        title='incerase Blue'
                        onPress={()=>dispatch({type:'Increment_blue'})}
                  />
                  <Button 
                        title='Decerase Blue'
                        onPress={()=>dispatch({type:'Decrement_blue'})}
                  />
            </View>
      )
}

export default ColorTile

Error I am getting on my command line

Unrecognized event: {"type":"client_log","level":"log","data":["Running \"main\" with {\"initialProps\":{\"exp\":{\"initialUri\":\"exp://192.168.225.192:19000\",\"manifest\":{\"iconUrl\":\"http://192.168.225.192:19001/assets/./assets/icon.png\",\"version\":\"1.0.0\",\"xde\":true,\"updates\":{\"fallbackToCacheTimeout\":0},\"sdkVersion\":\"38.0.0\",\"platforms\":[\"ios\",\"android\",\"web\"],\"hostUri\":\"192.168.225.192:19000\",\"slug\":\"rgb\",\"icon\":\"./assets/icon.png\",\"web\":{\"favicon\":\"./assets/favicon.png\"},\"loadedFromCache\":false,\"debuggerHost\":\"192.168.225.192:19001\",\"splash\":{\"resizeMode\":\"contain\",\"backgroundColor\":\"#ffffff\",\"image\":\"./assets/splash.png\",\"imageUrl\":\"http://192.168.225.192:19001/assets/./assets/splash.png\"},\"primaryColor\":\"#023C69\",\"orientation\":\"portrait\",\"isVerified\":true,\"env\":{},\"id\":\"@anonymous/rgb-656b5292-c20f-401c-b1b3-6976f3c65d94\",\"bundleUrl\":\"http://192.168.225.192:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false\",\"packagerOpts\":{\"https\":false,\"dev\":true,\"lanType\":\"ip\",\"hostType\":\"lan\",\"minify\":false,\"urlRandomness\":\"f3-muw\"},\"name\":\"rgb\",\"ios\":{\"supportsTablet\":true},\"developer\":{\"tool\":\"expo-cli\",\"projectRoot\":\"E:\\\\react\\\\rgb\"},\"mainModuleName\":\"node_modules\\\\expo\\\\AppEntry\",\"logUrl\":\"http://192.168.225.192:19000/logs\",\"assetBundlePatterns\":[\"**/*\"]},\"shell\":false}},\"rootTag\":711}"]}
like image 350
Lovepreet Sandhu Avatar asked Jun 30 '20 10:06

Lovepreet Sandhu


2 Answers

Just update EXPO CLI npm install -g expo-cli

like image 134
malinowsky Avatar answered Nov 18 '22 03:11

malinowsky


You are right. Please update expo client by running below command
npm install -g expo-cli

like image 3
Amit Kumar Trivedi Avatar answered Nov 18 '22 04:11

Amit Kumar Trivedi