React-Redux: Ich kann keinen Zustand in Requisiten speichern

Question

Ich habe unzählige Stunden daran gearbeitet, und dieser Artikel kommt am nächsten, aber ich kann nicht meinen Zustand zu Requisiten bekommen: React-redux store updates but React does not.

Ich erwarte, dass der Zustand in Requisiten gespeichert wird. Ich habe forschung mapStateToProps, und das steht auch leer da. Ich kann nicht herausfinden, wie man den Staat hier auf Requisiten speichert.

Aktion

export function userHome(){ 
return function(dispatch){ 
    fetch('/api/userhome', { 
     headers: { 
      'content-type': 'application/json', 
      'accept': 'application/json' 
     }, 
     credentials: 'include' 
    }).then((response) => response.json()) 
    .then((results) => { 
     if(results != 401){ 
      dispatch({ 
       type: types.USER_HOME, 
       applications: results.applications, 
       user: results.user 
      }) 
     } else { 
      browserHistory.push('/'); 
     } 
    }); 
    } 
}; 

Reducer

export var userHomeReducer = (state = {}, action) => { 
switch(action.type){ 
    case types.USER_HOME: 
     return { ...state, user: action.user, applications: action.applications }; 
    default: 
     return state; 
    } 
} 

Store (Sorgen nur über den Benutzer im Moment)

export var configure = (initialState = {}) => { 
    var reducers = combineReducers({ 
     createAccount: auth_reducers.createAccountReducer, 
     login: auth_reducers.loginReducer, 
     logout: auth_reducers.logoutReducer, 
     user: user_reducers.userHomeReducer 
    }); 

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore); 
const store = createStoreWithMiddleware(reducers); 

    return store; 
} 

Router Page - das Konsolenprotokoll innerhalb abonnieren zeigt den korrekten Zustand

store.subscribe(() => { 
    console.log('New state', store.getState()); 
}); 

store.dispatch(actions.userHome()); 

ReactDOM.render(
    <Provider store={store}> 
     <Router history={browserHistory}>{routes}</Router> 
    </Provider>, 
    document.getElementById('app') 
); 

Homepage (Vorbei an den Requisiten auf die nächste Seite nach unten)

var UserHomePage = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <MainNavBar/> 
       <CreateRecordForm/> 
       <ApplicationList/> 
      </div> 
     ); 
    } 
}); 


export default connect(
    (state) => { 
     return state; 
    } 
)(UserHomePage); 

Application - ich will die Requisiten von UserHomePage hier weitergegeben. Wenn ich console.log this.props, zeigt es Benutzer als ein leeres Objekt.

class ApplicationList extends Component{ 
    componentDidMount(){ 
     this.props.userHome() 
    } 
    render() { 
     const { user } = this.props; 
     console.log(this.props); 
     var renderApplications =() => { 
      return user.applications.map((application, index) => { 
       return (
        <ApplicationLinkItem 
         company={application.companyName} 
         position={application.position} 
         id={application.id} 
         key={index} 
        /> 
       ); 
      }); 
     } 
     var noApplications =() => { 
      if (userHome.applications.length == 0){ 
       return (
        <p>No Applications</p> 
       ); 
      } 
     } 
     return (
      <div> 
       <p>Applications</p> 
       {noApplications()} 
       {renderApplications()} 
      </div> 
     ); 
    } 
}; 

function mapStateToProps(state){ 
    return { 
     user: state.user, 
     applications: state.applications 
    }; 
}; 

export default connect(mapStateToProps, actions)(ApplicationList); 

Answer 1

Das ist das einzige, was mir vorkommt.

In Ihrer ApplicationList ändern mapStateToProps zu diesem.

const mapStateToProps = (state) => { 
    return { 
    user: state.user, 
    applications: state.applications 
    } 
} 

Wenn dies immer noch nicht funktioniert, lass es mich wissen.