如何简化使用React和Redux构建的网站?

时间:2016-06-08 14:09:42

标签: reactjs redux

我在系统生物学实验室工作。包括我在内的每个人都是研究人员,他们很少有时间或倾向于网络开发。但是之前的实验室成员使用React和Redux构建了一个漂亮的网站。至关重要的是,我们可以维护这个网站多年,并且不同的研究人员能够每周更新其内容。

我们的问题是网站太复杂而无法更新。例如,要添加新闻故事,必须安装所有节点模块,知道如何调试JSX编译错误,创建Story组件并将其导入NewsStory视图,然后重新部署节点服务器。我现在可以管理这个,但很快就要离开;我们担心每个新的维护者都必须学习React和Redux来更新网站。

以下是我的问题:是否有任何React设计模式可以简化基本静态网站内容的更新?例如,我使用Angular构建了另一个实验室网站,如果有人想要更新新闻故事,他们只需向NewsController添加一个新的JSON对象,然后通过FTP服务器上传修改后的JavaScript文件。对于实验室中的大多数人来说,这个工作流程更容易。

3 个答案:

答案 0 :(得分:2)

React是一种使复杂用户界面更易于维护的工具。由React应用程序的复杂性增加,由Facebook团队创建并且基本上由Redux项目复制的通道架构是一种简化组件之间复杂状态的方法。

听起来你们选择了React,因为对于一个简单的CMS类型网站来说,它可能不是必需的。有一些事情要说保持简单,使用React用于Wordpress CMS类型的网站可能不会保持简单。我推荐Django用于简单的CMS解决方案,以便轻松集成以进行身份​​验证管理,尤其是因为Python在生物学领域是一个相对受欢迎的选项。

这让我想起昨天与我分享的一个有趣且有点真实的推文。 https://twitter.com/iamdevloper/status/517616294909464576

答案 1 :(得分:1)

在某种程度上,Redux商店是您的Angular数据控制器。您可以在Redux / React网站中实现与Angular一起使用的相同过程。

以便将数据(例如故事)传递给要显示的Story组件。看看这个http://redux.js.org/docs/basics/Reducers.html

但如果你没有足够的兴趣/资源来学习前端开发,那么你可能会用Word Press这样的东西做得更好。

答案 2 :(得分:1)

希望Story组件可以通用,足以呈现任何类型的故事数据。

如果是这样,这是一种处理它的简单方法。在componentDidMount()组件的NewsStory生命周期方法中,从您希望显示的服务器(作为json对象数组)中获取(使用axios,superagent或fetch)所有故事并将其保存在NewsStory组件的状态。然后在render()的{​​{1}}方法中,映射状态数组以为每个故事对象呈现NewsStory组件(将每个故事作为道具传递到Story组件中)。

另一半是故事的CRUD UI。或者像使用Angular应用程序一样手动维护json。