這是一個(gè)典型的web應(yīng)用程序的技術(shù)棧，可以在這個(gè)項(xiàng)目的基礎(chǔ)上開(kāi)發(fā)你想做的應(yīng)用。前端的開(kāi)發(fā)有開(kāi)發(fā)和產(chǎn)品兩種模式，開(kāi)發(fā)模式主要是為了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 "http://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); 調(diào)用后端服務(wù)，?

export function* listTasks() {

? ? const tasks = yield call(ApiTasks.listTasks);

? ? yield put({

? ? ? ? type: LIST_TASK_SUCCESS,

? ? ? ? tasks

? ? })

}

再下面一行的yield put語(yǔ)句dispatch了LIST_TASK_SUCCESS這個(gè)action，payload就是REST API 返回的數(shù)據(jù)tasks.

計(jì)劃繼續(xù)開(kāi)發(fā)這個(gè)項(xiàng)目，最終做一個(gè)番茄時(shí)間管理的工具。感興趣的朋友可以在github上star 這個(gè)項(xiàng)目，下次可以隨時(shí)在“your star”中找到它。