Question

我正在开发一个小型React Redux应用程序，最初我在其中加载文章列表。单击这些文章中的每一个，都应在页面上呈现该特定文章的内容和详细信息。

我当前的应用程序架构如下

App.js

class App extends Component {
    render() {
        return (
            <div className="App">
                <AppHeader></AppHeader>
                <PageContent></PageContent>
            </div>
        );
    }
}

PageContentContainer.js

const mapStateToProps = state => ({
    posts: state.simpleReducer.posts
});

const mapDispatchToProps = dispatch => {

    return {
        frontPagePosts: () => {
            dispatch(actions.frontPageItems())
        }
    }
};


class PageContentContainer extends Component{

    componentDidMount(){
        this.props.frontPagePosts();
    }

    render(){
        return(
            <div>
                <main>
                    <FrontPageComponent posts={this.props.posts}/>
                </main>
            </div>
        )
    }
}

FrontPageComponent 只是一个视图呈现组件，其中没有逻辑。

class FrontPageComponent extends Component{
    render(){

        return(
            <div>
                <div className="container frontPageContainer">
                    {this.props.posts.map((val, idx) => {
                        return(
                            <div key={idx} className='row frontPageContent'>
                                <div className="col-12 col-md-12 col-sm-12 col-lg-12">
                                    <h2>
                                        <a href={'/' + val.slug}>
                                            {val.title}
                                        </a>
                                    </h2>
                                </div>
                                <div className="col-12 col-md-12 col-sm-12 col-lg-12">{val.excerpt}</div>
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}

我当前的思考过程是引入另一个用于查看个别文章<ReadArticleComponent/>的视图组件。每次用户单击单个文章时，它将在商店中更改一个名为showArticle的布尔状态值。基于此，它将相应地渲染这两个组件。因此，例如，我的PageContentContainer中的逻辑看起来像

componentDidMount(){
    //ajax call to the backend

    if(!this.props.showArticle){
     this.props.frontPagePosts();
    }else{
      this.props.showArticleContent()
    } 
}

.........

render(){
   ......

   {!this.props.showArticle ? <FrontPageComponent.../> 
     : <ReadArticleComponent/>
   }
}

但是，如果用户单击“后退”按钮并返回所有文章的页面，我将如何处理？我的方法正确吗？还是应该在我的应用中使用React Router？

不确定我对React Redux应用程序中特定部分的处理方式吗？

0 个答案: