分享自己做的一個小應用,這是一個典型的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 "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); 調用后端服務,
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”中找到它。