Working with state objects in Redux (basic)

Question

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

Has nothing to do with state or redux. This is a React error, most likely in App. Could you show us that? — ZekeDroid
– ZekeDroid, Commented Jun 7, 2016 at 16:56
Of course, I've added a link in the description. Let me know if you want more info. I already looked at where the error references but couldn't understand the problem on my own — darkace
– darkace, Commented Jun 7, 2016 at 20:39
I think you are trying to render an array (display the entire state in html?) and react complaints that its not possible to do so. Hence the suggestion to use map to show individual values. Have tried using Array.map while displaying your state in the template? — Ajai
– Ajai, Commented Jun 8, 2016 at 0:25
Thank you for the answer, sounds like it's along the right lines. Just struggling slightly to actually implement that at the moment but will let you know if I succeed — darkace
– darkace, Commented Jun 8, 2016 at 10:31

xiaofan2406 · Accepted Answer · 2016-06-08 01:24:35Z

1

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

answered Jun 8, 2016 at 1:24

xiaofan2406

3,3105 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Working with state objects in Redux (basic)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related