Redux Resource 项目教程

1. 项目的目录结构及介绍

redux-resource/
├── example/
│   ├── src/
│   └── test/
├── src/
│   ├── actions/
│   ├── reducers/
│   └── utils/
├── test/
│   ├── actions/
│   ├── reducers/
│   └── utils/
├── .babelrc
├── .eslintrc
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── circle.yml
└── package.json

目录结构介绍

• example/: 包含项目的示例代码，通常用于展示如何使用该项目。

  • src/: 示例代码的源文件。
  • test/: 示例代码的测试文件。

• src/: 项目的核心源代码。

  • actions/: 包含 Redux 的 action creators。
  • reducers/: 包含 Redux 的 reducers。
  • utils/: 包含项目中使用的工具函数。

• test/: 项目的测试代码。

  • actions/: action creators 的测试文件。
  • reducers/: reducers 的测试文件。
  • utils/: 工具函数的测试文件。

• .babelrc: Babel 配置文件，用于转译 JavaScript 代码。

• .eslintrc: ESLint 配置文件，用于代码风格检查。

• .gitignore: Git 忽略文件配置。

• CHANGELOG.md: 项目更新日志。

• LICENSE: 项目许可证。

• README.md: 项目介绍和使用说明。

• circle.yml: CircleCI 配置文件，用于持续集成。

• package.json: 项目的依赖和脚本配置。

2. 项目的启动文件介绍

项目的启动文件通常是 src/index.js 或 src/main.js，但在 redux-resource 项目中，启动文件可能是一个示例文件，例如 example/src/index.js。

示例启动文件 example/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import resourceMiddleware from 'redux-resource';
import App from './App';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(resourceMiddleware)
);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

启动文件介绍

• React 和 ReactDOM: 用于渲染 React 组件。
• Provider: 将 Redux store 提供给整个应用。
• createStore: 创建 Redux store。
• applyMiddleware: 应用中间件，这里使用了 resourceMiddleware。
• App: 应用的根组件。
• rootReducer: 应用的根 reducer。

3. 项目的配置文件介绍

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

.eslintrc

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "no-console": "off"
  }
}

.gitignore

node_modules/
dist/
.env

package.json

{
  "name": "redux-resource",
  "version": "1.0.0",
  "description": "Redux action creator for managing RESTful resources",
  "main": "src/index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js --open",
    "build": "webpack --config webpack.config.js",
    "test": "jest"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "redux": "^4.0.5",
    "redux-resource": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "eslint": "^7.2.0",
    "jest": "^26.0.1",
    "webpack": "^4.43.0",
    "webpack-dev-server": "^3.11.0"
  }
}

配置文件介绍

• .babelrc: 配置 Babel 转译器，支持 ES6 和 React 语法。
• .eslintrc: 配置 ESLint，用于代码风格检查。
• .gitignore: 配置 Git 忽略的文件和目录。
• package.json: 项目的依赖和脚本配置，包括启动、构建和测试命令。

通过以上配置，redux-resource 项目可以顺利启动、构建和测试。