Redux Axios Middleware 使用教程

Redux Axios Middleware 使用教程

  redux-axios-middlewareRedux middleware for fetching data with axios HTTP client项目地点:https://gitcode.com/gh_mirrors/re/redux-axios-middleware
1. 项目的目次布局及介绍

1. redux-axios-middleware/
2. ├── src/
3. │   ├── index.js
4. │   ├── middleware.js
5. │   ├── actions.js
6. │   ├── reducer.js
7. ├── test/
8. │   ├── middleware.test.js
9. │   ├── actions.test.js
10. │   ├── reducer.test.js
11. ├── .gitignore
12. ├── .travis.yml
13. ├── CHANGELOG.md
14. ├── LICENSE
15. ├── package.json
16. ├── README.md
17. ├── tsconfig.json
18. ├── webpack.config.js

复制代码

目次布局介绍

• src/: 包罗项目的主要源代码文件。
  
  
  
  • index.js: 项目的入口文件。
    
  • middleware.js: 定义了 Redux 中心件。
    
  • actions.js: 定义了与 API 哀求相关的动作。
    
  • reducer.js: 定义了状态管理逻辑。
    
  
  
• test/: 包罗项目的测试文件。
  
  
  
  • middleware.test.js: 中心件的测试文件。
    
  • actions.test.js: 动作的测试文件。
    
  • reducer.test.js: 状态管理逻辑的测试文件。
    
  
  
• .gitignore: Git 忽略文件配置。
  
• .travis.yml: Travis CI 配置文件。
  
• CHANGELOG.md: 项目更新日志。
  
• LICENSE: 项目许可证。
  
• package.json: 项目依靠和脚本配置。
  
• README.md: 项目说明文档。
  
• tsconfig.json: TypeScript 配置文件。
  
• webpack.config.js: Webpack 配置文件。
  

2. 项目的启动文件介绍

src/index.js

这是项目的入口文件，负责初始化 Redux 存储和应用中心件。

1. import { createStore, applyMiddleware } from 'redux';
2. import thunkMiddleware from 'redux-thunk';
3. import { createRAMiddleware } from './middleware';
4. import reducer from './reducer';
6. const raMiddleware = createRAMiddleware({
7.   actionBeforeFetch: { type: 'FOO_ACTION' },
8.   actionAfterFetch: { type: 'BAR_ACTION' },
9.   actionCreatorOnFail: (e) => ({ type: 'ERROR', payload: e.response.data }),
10. });
12. const store = createStore(reducer, applyMiddleware(thunkMiddleware, raMiddleware));
14. export default store;

复制代码

文件介绍

• createStore: 创建 Redux 存储。
  
• applyMiddleware: 应用中心件。
  
• thunkMiddleware: Redux Thunk 中心件，用于处置处罚异步动作。
  
• createRAMiddleware: 自定义的 Axios 中心件。
  
• reducer: 状态管理逻辑。
  

3. 项目的配置文件介绍

package.json

这是项目的依靠和脚本配置文件。

1. {
2.   "name": "redux-axios-middleware",
3.   "version": "1.0.0",
4.   "description": "A simple axios middleware for Redux",
5.   "main": "src/index.js",
6.   "scripts": {
7.     "start": "webpack-dev-server --mode development",
8.     "build": "webpack --mode production",
9.     "test": "jest"
10.   },
11.   "dependencies": {
12.     "axios": "^0.21.1",
13.     "redux": "^4.0.5",
14.     "redux-thunk": "^2.3.0"
15.   },
16.   "devDependencies": {
17.     "jest": "^26.6.3",
18.     "webpack": "^5.11.1",
19.     "webpack-cli": "^4.3.1",
20.     "webpack-dev-server": "^3.11.1"
21.   }
22. }

复制代码

文件介绍

• name: 项目名称。
  
• version: 项目版本。
  
• description: 项目描述。
  
• main: 入口文件路径。
  
• scripts: 定义了项目的脚本命令。
  
  
  
  • start: 启动开发服务器。
    
  • build: 构建生产情况代码。
    
  • test: 运行测试。
    
  
  
• dependencies:
  

  redux-axios-middlewareRedux middleware for fetching data with axios HTTP client项目地点:https://gitcode.com/gh_mirrors/re/redux-axios-middleware

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。