React-Redux: Unable to store state in props

Question

I have worked on this for countless hours, and this article comes closest, but i cant seem to get my state to props: React-redux store updates but React does not.

I expect the state to be stored to props. I have research mapStateToProps, and that is coming up as empty as well. I can not figure out how to store the state to props here.

Action

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 (just worrying about the user at the 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 - the console log within subscribe shows the correct state

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

Home Page (Passing down the props to the next page)

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


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

ApplicationList - i want the props from UserHomePage passed down to here. when i console.log this.props, it shows user as an empty object.

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

score 1 · Answer 1 · answered Jul 15 '17 at 12:46

This is the only thing that come up to me.

In your ApplicationList change mapStateToProps to this.

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

If this still not working, please let me know.

React-Redux: Unable to store state in props

1 Answers1