Antd开发后台管理笔记一

Antd 开发后台管理第一次记录

• 通过create-react-app antd-admin 创建react项目
• 安装antd yarn add antd axios
• 设置antd 按需加载，需要安装依赖库：yarn add babel-plugin-import
• 安装状态管理工具redux和调试工具：yarn add redux react-redux redux-thunk

• 调试工具安装比较麻烦文档在github的 直接安装yarn add redux-devtools

• 安装路由管理 route ：yarn add route react-router react-router-dom

• 安装一个支持@装饰器的依赖： yarn add babel-plugin-transform-decorators-legacy --dev
• 设置package.json 实现antd按需加载和@符合的支持

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ],
      "transform-decorators-legacy"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "proxy": "http://localhost:8001",

关于react-redux 的使用，参照文档，自我总结以下注意事项：

第一:创建store 如果在使用@connect()时遇到cannot read property 'state' of undefined ，请去检查你的插件是不是最新的2.15.2及以上才可以Redux DevTools 2.15.3

Redux DevTools的使用方式如下

import { createStore,applyMiddleware,compose } from "redux";
import thunk from "redux-thunk";
import reducers  from "./reducer";

const store = createStore(reducers,compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
))

第二：使用@符号连接connect 最上面已经有安装说明了。下面演示怎么用。

import {connect} from 'react-redux
@connect(
    // 你需要state 的什么属性
    state=>{ state.user  console.log(state)},
    {regisger}  // 你需要的什么方法放到props里面
)