Arbeiten mit Zustandsobjekten in Redux (Basis)

Question

Ich bin neu in Redux/React und habe Probleme mit dem Arbeiten mit Zustandsobjekten.

Ich habe meinen Zustand, wie in index.js unten initialisiert, aber ich erhalte diese Störung

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') 
) 

Hier ist meine Aktion

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()) 
    } 
} 

Und hier ist mein Minderer

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

    switch (action.type) { 

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

    default: 
     return state 
    } 
} 

Wenn es irgendwelche zusätzlichen Informationen ist es mich wissen Sie bitte benötigen lassen. Ich kann es nur zu arbeiten, wenn sie mit exampleState = 'this is my message!'

UPDATE arbeiten: Hier ist der Repo (siehe Client-Ordner für Sachen reagieren) https://github.com/jaegerbombb/twitter-api-test

Answer 1

Du overwritting this.props.children mit Ihrem redux Zustand (in Ihrem twitterContainer.js). Ich bin mir nicht sicher, ob das eine gute Idee ist. Reagieren Sie erwarten children zu einem node, aber es wird ein Array (von Ihrem twitterApp Reducer).

Für Sie Code, können Sie einfach die children Schlüssel zu einem anderen Namen in Ihrem mit staatlichen oder redux twitterContainer.js und twitterComponent.js