Unable to retrieve the state from the store after redirection in Redux React JS

Question

I am developing a Web application using React JS + Redux. I am new to React. What I am doing now is trying to set the state on one page and then retrieve the state in another page after redirection.

I have a Component called EventListComponent that displays the list of events. Inside that component, I change the state of a reducer calling an event.

This is the reducer function I call.

import * as EditEventActions from '../actions/edit.event.actions';

export default function (state = { }, action){
    switch (action.type)
    {
        case EditEventActions.EVENT_SET_EDITING_EVENT:
        return { ...state, event: action.payload }

        default:
        return state;
    }
}

I fire the actions before redirecting to another page like this.

this.props.setEditingEvent(event);
    this.props.history.push({ 
       pathname : '/event/'+ event.id +'/edit'
    });

In the new page, I render the component called, EditEventComponent.

This is the definition of the EditEventComponent

export class EditEventComponent extends React.Component{

    constructor(props)
    {
        super(props);

        alert(this.props.event.id)//cannot retrieve event here
    }


    render(){
        return (
            <h4>This is the Edit Event component</h4>
        );
    }

}



function mapStateToProps(state)
{
    return {
        event: state.editEvent.event
    };
}

function matchDispatchToProps(dispatch)
{
    return bindActionCreators({

    }, dispatch);
}


const enhance = compose(withWidth(), withStyles(themeStyles, { withTheme: true }), connect(mapStateToProps, matchDispatchToProps))
export default enhance(EditEventComponent);

As you can see, inside the EditEventComponent I am trying to retrieve the event field of the state which is set in the previous page. But I cannot retrieve it. My questions are

1. Is the state (of the redux store) reset after redirecting to the new page?

2. What is wrong with my code?

3. If what I am doing is not the right approach, what would be the best way to pass an object from one page to another in React Redux?

Here is my action

export const EVENT_SET_EDITING_EVENT = "(EVENT) SET EDITING EVENT";


export const setEditingEvent = (data) => ({
    type: EVENT_SET_EDITING_EVENT,
    payload: data
});

Here is the reducer

import * as EditEventActions from '../actions/edit.event.actions';

export default function (state = { }, action){
    switch (action.type)
    {
        case EditEventActions.EVENT_SET_EDITING_EVENT:
        return { ...state, event: action.payload }

        default:
        return state;
    }
}

I expose the EventListComponent in this way as well.

const enhance = compose(withWidth(), withStyles(themeStyles, { withTheme: true }), connect(mapStateToProps, matchDispatchToProps))

export default enhance(EventListComponent);

Answer 1

您可能没有在setEditingEvent操作中正确设置类型，并且reducer返回初始状态，因为它没有达到EVENT_SET_EDITING_EVENT