如何为React-Redux-ElectronJS应用程序创建一个简单的结构

Question

在审阅并试图理解Hardchor Timesheet's背后的代码结构失败后，我希望是否有人可以提出并解释React-Redux-ElectronJS应用程序的结构

可以使结构适应主要和渲染器过程中的处理以及与两个过程交互的全局存储。

初学者的解释非常有用

Answer 1

您可以使用electron-react-boilerplate

Answer 2

基本而干净的结构将是like

<your_project>
  |- app
     |- src
        |- main.js
        |- components
           |- component1
           |  |- index.js
           |  |- actions
           |  |  |- index.js
           |  |- reducer
           |  |  |- index.js
           |  |- sagas
           |     |- sagas1.js
           |     |- sagas2.js
           |- component2
           |  |- index.js
           |  |- actions
           |  |  |- index.js
           |  |- reducer
           |  |  |- index.js
           |  |- sagas
           |     |- sagas1.js
           |     |- sagas2.js
           |- reducer
           |  |- index.js
           |- action
           |  |- index.js
           |- sagas
              |- index.js

每个组件都有自己的动作，reducer，sagas这将是完全有用的，因为当你需要对组件进行任何更改时，只需在组件目录结构中导航。

顶级减速器index.js将导入所有其他组件的减速器，类似于顶级动作和sagas index.js分别从组件导入动作和传单。

Answer 3

您可以看到此仓库Desktop。它与React，Redux，React Router和Redux-Saga集成在一起，并以Webpack作为捆绑器。而且，应用程序的结构并不复杂。