@reduxjs/toolkit 小结

redux 架构

1、创建传统的react+redux架构环境
create-react-app react-admin
自行安装redux、redux-thunk、react-redux、immer并设计架构（不支持TS）

2、创建react+redux的TS环境
create-react-app react-admin --template typescript
自行安装redux、redux-thunk、react-redux、immer并设计架构（支持TS和ES6）

3、创建react+redux的TS环境（最佳实践）
create-react-app react-admin --template redux-typescript
无须再安装redux等，默认就已经集成了@reduxjs/toolkit的Redux架构

参考链接：https://github.com/reduxjs/cra-template-redux-typescript

本次项目的代理方式

// 在src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:9999',
      changeOrigin: true
    })
  );
}

@reduxjs/toolkit 小结

• 在@reduxjs/toolkit中集成其它中间件：redux-logger，还要安装 @types/redux-logger来支持TS环境 import logger from 'redux-logger'; // 需要安装 @types/redux-logger

• 中间件的使用 export const store = configureStore({ // 子store reducer: { counter, user }, // 安装中间件 需要考虑原有的中间件 使用concat连接新的中间件 middleware: (getDefaultMiddlewares)=>(getDefaultMiddlewares().concat(logger)) });

• 在整理文件的时候出现很多其他文件的干扰 只可以删除尝试

• 如何解决ts环境下'@'报错问题？在tsconfig.json中添加 baseUrl和paths 选项。参考链接：https://www.typescriptlang.org/tsconfig#compilerOptions

• 入门学习TS

  • TS笔记：https://zhuanlan.zhihu.com/p/377754481
  • TS中文网：https://www.tslang.cn/docs/handbook/basic-types.html

• 启动项目时不打开浏览器，scripts/start.js中注释掉 openBrowser()。

• jsx 语法必须写在tsx文件中 不然会报错