时间戳

首页 > 解决方案 > 在 Redux React JS 中重定向后无法从存储中检索状态

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

问题描述

我正在使用 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 内部，我试图检索在上一页中设置的状态的事件字段。但我无法找回它。我的问题是

  1. 重定向到新页面后（redux 商店的）状态是否重置？

  2. 我的代码有什么问题？

  3. 如果我所做的不是正确的方法，那么在 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);

标签： javascriptreactjsredirectreduxredux-store

解决方案

您可能没有正确设置类型，setEditingEvent并且减速器返回初始状态，因为它没有命中EVENT_SET_EDITING_EVENT

推荐阅读