一个基于react redux typescript saga webpack springboot和jpa的示例程序

这是一个典型的web应用程序的技术栈,可以在这个项目的基础上开发你想做的应用。前端的开发有开发和产品两种模式,开发模式主要是为了Hot code reloading.

代码在这里:https://github.com/vcycyv/react-redux-typescript-saga-webpack-springboot-jpa-pomotodo 

使用方法:

1. clone/download the project

2. run "gradle wrapper"

3. run "gradle build" (It will download jar files and js modules dependency)

4. Before importing the project into IDE, comment out "//include 'src:main:frontend" from settings.gradle

5. Import gradle project to IDE. (I use eclipse)

6. create a postgre db named "pomotodo"

7. Start the mid-tier by running Application.java

8. UI development 

   8.1 For projection, navigate to /src/main/frontend and run "npm run build", and go to localhost:8080/pomotodo 

   8.2 For development (hot reloading), navigate to /src/main/frontend and run "npm start", and go to localhost:9090 


使用redux-saga的好处是为了side-effect, 比如下面代码中,const tasks = yield call(ApiTasks.listTasks); 调用后端服务, 

export function* listTasks() {

    const tasks = yield call(ApiTasks.listTasks);

    yield put({

        type: LIST_TASK_SUCCESS,

        tasks

    })

}

再下面一行的yield put语句dispatch了LIST_TASK_SUCCESS这个action,payload就是REST API 返回的数据tasks.

计划继续开发这个项目,最终做一个番茄时间管理的工具。感兴趣的朋友可以在github上star 这个项目,下次可以随时在“your star”中找到它。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,010评论 19 139
  • “什么?安迪没有死?”点点差点儿被一口茶呛到,赶忙扶稳杯子。 “对,死亡记录和葬礼都是假的,下葬的是另一具尸体,不...
    密斯森林阅读 261评论 0 3
  • 今年,《演员的诞生》辛芷蕾一下子就被观众记住。 12年,《北京爱情故事》佟丽娅被全国观众所熟知。 辛芷蕾,炽烈的玫...
    云洱涡阅读 716评论 3 8
  • 一个人在家,没有男票没有饭,屎了算了 一个人出门,没有男票没有钱,回家算了 我就是这样一个寂寞的矫情婊:) 来京一...
    周末末阅读 339评论 0 1