Redux-Sagas-TypeScript 示例项目教程
1. 项目的目录结构及介绍
项目的目录结构如下:
redux-sagas-typescript-by-example/
├── 00_boilerplate/
├── 01_hello_saga/
├── 02_take_latest/
├── 03_throttle/
├── 04_race/
├── 05_all/
├── 06_confirmation/
├── 07_channels/
├── .gitignore
├── LICENSE
├── README.md
目录结构介绍
00_boilerplate/
: 初始项目样板,包含 React 和 Redux 的样板代码,以及一个简单的 reducer 和一个显示数字列表的组件。01_hello_saga/
: 安装 redux-saga 库并添加必要的设置代码,创建一个简单的服务。02_take_latest/
: 探索 redux-saga 的辅助效果,学习如何使用takeLatest
。03_throttle/
: 探索 redux-saga 的辅助效果,学习如何使用throttle
。04_race/
: 探索 redux-saga 的辅助效果,学习如何使用race
。05_all/
: 探索 redux-saga 的辅助效果,学习如何使用all
。06_confirmation/
: 探索 redux-saga 的辅助效果,学习如何使用确认机制。07_channels/
: 探索 redux-saga 的辅助效果,学习如何使用通道。.gitignore
: Git 忽略文件。LICENSE
: 项目许可证。README.md
: 项目说明文档。
2. 项目的启动文件介绍
项目的启动文件主要位于 00_boilerplate/
目录下,具体文件如下:
index.tsx
: 项目的入口文件,负责渲染 React 应用到 DOM 中。App.tsx
: 主应用组件,包含路由和主要布局。store.ts
: Redux 存储配置文件,包含创建存储的逻辑。
启动文件介绍
-
index.tsx
:import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); reportWebVitals();
-
App.tsx
:import React from 'react'; import { Provider } from 'react-redux'; import store from './store'; import NumberList from './components/NumberList'; const App: React.FC = () => { return ( <Provider store={store}> <div className="App"> <NumberList /> </div> </Provider> ); } export default App;
-
store.ts
:import { createStore, applyMiddleware } from 'redux'; import createSagaMiddleware from 'redux-saga'; import rootReducer from './reducers'; import rootSaga from './sagas'; const sagaMiddleware = createSagaMiddleware(); const store = createStore( rootReducer, applyMiddleware(sagaMiddleware) ); sagaMiddleware.run(rootSaga); export default store;
3. 项目的配置文件介绍
项目的配置文件主要包括以下几个部分:
tsconfig.json
: TypeScript 配置文件。package.json
: 项目依赖和脚本配置文件。.gitignore
: Git 忽略文件配置。
配置文件介绍
tsconfig.json
:{ "compilerOptions": { "target": "es5", "lib": ["dom", "es2015"], "jsx": "react", "module": "commonjs",