Redux-Sagas-TypeScript 示例项目教程

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",