React native + redux + empty object

Question

I have a problem with redux on my react native app. I fetch an API, in my action controller whan i console.log the data i have my object of data. In my reducer when i console.log action.data i have my object data. However when i'm in my component and try console.log(state.myreducer) in mapStateToProps i have something like this [Object Object]. I tried to map on the data but i have an error (undefined). I don't know where is the problem. Here after my code

action.js

export function getConditions(lat, long){
const url = `${URL_CONDITIONS}${lat},${long}.json`
return (dispatch) => {
    fetch(url)
    .then(res => res.json())
    .then(data => dispatch(fetchConditionsSuccess(data)))
    .catch(err => dispatch(fetchConditionsFailure(err)))
}}

reducer.js

export default function (state={}, action){
switch(action.type){
    case FETCH_CONDITIONS:
        return {isLoading: true};
    case FETCH_CONDITIONS_SUCCESS:
        return {data:action.data}
    case FETCH_CONDITIONS_FAILURE:
        return{ error : true};
    default :
    return state
}}

component.js

function mapStateToProps(state){
console.log("state" + state.conditionsReducer)
return{
    weather : state.conditionsReducer
}} 
export default connect(mapStateToProps, {getConditions})(Conditions)

app.js

const store = createStore(rootReducer, applyMiddleware(thunk))
export default class App extends Component{
constructor(props){
super(props)
this.state = {isOpen : false}
this.getSideMenu = this.getSideMenu.bind(this)
}
getSideMenu(){
this.setState({isOpen : true})
}
render(){
return(
  <Provider store={store}>
    <SideMenu 
        menu={UpdateCity}
        isOpen = {this.state.isOpen}
        >
        <StatusBar
          hidden={true}
          />
        <MainScreen isOpen={this.getSideMenu}/>
    </SideMenu>
  </Provider>
)
}
}

Thanks for your help

Dyo Dyo · Accepted Answer · 2018-02-13T15:28:22

You're getting [Object, Object] in console because you are converting the array of objects to a String (doing String + var returns a string), try this to have a proper display in console :

console.log("state :", state.conditionsReducer)

React native + redux + empty object

2 Answers