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. 项目的目次布局及介绍
redux-axios-middleware/
├── src/
│ ├── index.js
│ ├── middleware.js
│ ├── actions.js
│ ├── reducer.js
├── test/
│ ├── middleware.test.js
│ ├── actions.test.js
│ ├── reducer.test.js
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── package.json
├── README.md
├── tsconfig.json
├── 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 存储和应用中心件。
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createRAMiddleware } from './middleware';
import reducer from './reducer';
const raMiddleware = createRAMiddleware({
actionBeforeFetch: { type: 'FOO_ACTION' },
actionAfterFetch: { type: 'BAR_ACTION' },
actionCreatorOnFail: (e) => ({ type: 'ERROR', payload: e.response.data }),
});
const store = createStore(reducer, applyMiddleware(thunkMiddleware, raMiddleware));
export default store;
文件介绍
[*]createStore: 创建 Redux 存储。
[*]applyMiddleware: 应用中心件。
[*]thunkMiddleware: Redux Thunk 中心件，用于处置处罚异步动作。
[*]createRAMiddleware: 自定义的 Axios 中心件。
[*]reducer: 状态管理逻辑。
3. 项目的配置文件介绍
package.json
这是项目的依靠和脚本配置文件。
{
"name": "redux-axios-middleware",
"version": "1.0.0",
"description": "A simple axios middleware for Redux",
"main": "src/index.js",
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production",
"test": "jest"
},
"dependencies": {
"axios": "^0.21.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"jest": "^26.6.3",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1"
}
}
文件介绍
[*]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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]