CODEWITHSUNDEEP
javascriptreactjsstateredux
darkace
darkace

Reputation: 878

Working with state objects in Redux (basic)

I'm new to Redux/React and am having problems working with state objects.

I have initialised my state as in index.js below but am getting this error

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {text}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of ShowTweetComponent.

index.js

const initialState = {
  text: 'test successful'
} 

let store = createStore( 
  twitterApp,       
  initialState,     
  applyMiddleware(  
    thunkMiddleware 
  )
) 

console.log('1 - index.js loaded')

render( 
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('LoadApp')
)

Here is my action

function getTweetData(json) {
  return {
    type: REQUEST_TWEETS,
    tweet: json.status_text,
    receivedAt: Date.now().toString()
  }
}

function fetchTweets() {

  return dispatch => {
    return fetch(`/api/twitter`)
      .then(response => response.json())
      .then(json => dispatch(getTweetData(json)))
  }


}

export function fetchTweetsIfNeeded() {
  return (dispatch, getState) => {
    return dispatch(fetchTweets())
  }
}

And here's my reducer

const displayData = (state = [], action) => {

  switch (action.type) {

    case REQUEST_TWEETS:
      return [
        ...state,
        {
          text: action.tweet
        }
      ]

    default:
      return state
  }
}

If there's any extra info you need please let me know. I can only get it to work when working with exampleState = 'this is my message!'

UPDATE: Here's the repo (see client folder for react stuff) https://github.com/jaegerbombb/twitter-api-test

Upvotes: 0

Views: 310

Answers (1)

xiaofan2406
xiaofan2406

Reputation: 3310

You are overwritting this.props.children with your redux state (in your twitterContainer.js). I am not sure if this a good idea. React expect children to be a node, but it is getting an array (from your twitterApp reducer).

For you code, you can just change the children key to another name in your twitterContainer.js and twitterComponent.js

Upvotes: 1

Related Questions