Question

我正在使用React JS + Redux开发一个Web应用程序。我是React的新手。我现在正在做的是尝试在一个页面上设置状态，然后在重定向后在另一页面上检索状态。

我有一个名为EventListComponent的组件，用于显示事件列表。在该组件内部，我更改了调用事件的reducer的状态。

这是我调用的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;
    }
}

我先触发操作，然后再重定向到另一个这样的页面。

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

在新页面中，我渲染名为EditEventComponent的组件。

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

您可以看到，在EditEventComponent内部，我试图检索在上一页中设置的状态的事件字段。但是我找不到它。我的问题是

（重定向存储的状态）在重定向到新页面后是否重置？
我的代码有什么问题？
如果我在做的事情不是正确的方法，那么在React Redux中将对象从一页传递到另一页的最佳方法是什么？

这是我的行动

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


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

这是减速器

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

我也以这种方式公开EventListComponent。

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

export default enhance(EventListComponent);

Answer 1

您可能没有在setEditingEvent操作中正确设置类型，而reducer由于未命中EVENT_SET_EDITING_EVENT而返回了初始状态

在Redux React JS中重定向后无法从存储中检索状态

1 个答案: