React Redux, Objects are not valid as a React child

Question

Error: Objects are not valid as a React child (found : object with keys {badgesReducer , cityPickerReducer}) if you meant to render a collection of children, use an array instead.

Tried to fix this for days and no result :"(.

Note: they're working well if use single reducer (if i did not use "combineReducers({...})")

my actions:

1:

export const Picked = () =>{
    return{
       type: 'Picked',
       city: this.city
    }
}

2:

export const VIEW =()=>{
    return{
        type: 'flex' }
}

export const HIDE =()=>{
    return{
        type: 'none' }
}

my reducers:

1:

export default (state= 'none', action) =>{
     switch(action.type){
        case 'VIEW':
          return 'flex';
        case 'HIDE':
          return 'none';
        default:
          return state; }
}

2:

export default (state="pick city", action) =>{
    switch(action.type){
        case 'Picked':
          return  action.city;
        default: {
          return state; }
     }
}

and finally combine reducers and here is the error occurs as described top:

import {combineReducers} from 'redux';
import badgesReducer from './badgesReducer';
import cityPickReducer from './cityPickReducer';

export default rootReducer = combineReducers({
   badgesReducer ,
   cityPickReducer
});

and here is the store:

import {createStore} from 'redux';
import rootReducer from '../reducers/reducers'
export default store = createStore(rootReducer);

UPDATE:

badges Components:

1) Home component:

imports ... 
import {connect} from 'react-redux';

class Home extends React.Component {
 render() {
     return (
      <View  style={styles.container} >
       <BloodList navigation={this.props.navigation }/>
      </View>
    ); }

  componentDidMount(){
   ...
    this._notificationSubscription = 
    Notifications.addListener(this._handleNotification);                
   }

   _handleNotification = (notification) => {
     ...
    if(notification.origin == 'received'){
            this.props.VIEW();
     ...}
  }

  const mapDispatchToProps=(dispatch)=>{
  return {
   VIEW:()=> dispatch({type: 'VIEW'})
  }
}

export default connect(null,mapDispatchToProps)(Home);

2) Notification Component:

import ...
import {withNavigationFocus} from 'react-navigation';
import {connect} from 'react-redux';

class Notifications extends React.Component {

  componentDidUpdate(){
     if(this.props.isFocused){
          this.props.HIDE(); }
  }

  render() {   
    return (
      <View  style={styles.container} >
                  <NotificationsList navigation={this.props.navigation}/>  
      </View>
    ); }  
}
const mapDispatchToProps=(dispatch)=>{
  return {
   HIDE:()=> dispatch({type: 'HIDE'})
  }
}

export default connect(null,mapDispatchToProps)(withNavigationFocus(Notifications))

3) BarBadges component

import ...
import {connect} from 'react-redux';

const NotificationsWithBadges =(props)=>{
    return <IconWithBadge {...props } {...props.badge.type}/>;
}

const mapStateToProps=(state) => {
    return {
        badge : state}
}
 export default connect(mapStateToProps)(NotificationsWithBadges);

4) Badges component:

import...
export default...
render(){...
<Ionicons name={name} size={size} color={color} />
         {this.props.badge == 'flex' &&(
            <View style={{
      ....
}}

PickCity components:

1) CreatPost component:


import {connect} from 'react-redux';
var tempCity;
...

 class CreatePost...{
  ...
 render(){...}
}

const mapStateToProps=(state) => {
  return tempCity= { city : state }
}
export default connect(mapStateToProps)(CreatePost);

2) CitySearch component:

import...
import {connect} from 'react-redux'

var pickedCity;
...
class CitySearch...{
 ...
 render(){...}
}

const mapDispatchToProps=(dispatch)=>{
    return {
     Picked:()=>dispatch({type:'Picked', city:pickedCity})
    } 
}
export default connect(null,mapDispatchToProps)(CitySearch);

Rename Picked to picked (with lower case), otherwise it looks like a react component. — Clarity
The error seems to be coming from the react component... Pls share code of that one... — Kwame Opare Asiedu

spycbanda spycbanda · Accepted Answer · 2019-12-02T08:34:20

It is all okay. But I think the problem is due to no declaration of rootReducer. You can try this:

import {combineReducers} from 'redux';
import badgesReducer from './badgesReducer';
import cityPickReducer from './cityPickReducer';

const rootReducer = combineReducers({
   badgesReducer ,
   cityPickReducer
}); 

export default rootReducer;

React Redux, Objects are not valid as a React child

UPDATE:

badges Components:

PickCity components:

2 Answers