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}"]}
Just update EXPO CLI npm install -g expo-cli
You are right.
Please update expo client by running below command npm install -g expo-cli
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With