柯建军的博客

// 打包
yarn build
// 本地预览
// 安装全局安装本地服务包 
npm i -g serve
// 或 直接使用 
npx serve -s ./build

// 安装分析打包体积的包
yarn add source-map-explorer
// 在package.json中添加一条命令	"anylyze": "source-map-explorer 'build/static/js/*.js"
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "anylyze": "source-map-explorer 'build/static/js/*.js"
  }
// 使用
yarn anylyze

// 导入 lazy 和 Suspense 需要配合使用
import { lazy, Suspense } from 'react'
// 正常导入页面
import Layout from '@/pages/Layout'
import Login from './pages/Login'
import NotFound from './pages/NotFound'

// 懒加载导入,
const Layout = lazy(() => import('@/pages/Layout'))
const Login = lazy(() => import('./pages/Login'))
const NotFound = lazy(() => import('./pages/NotFound'))

// Suspense组件需要将把懒加载的组件包裹在里面
export default function App() {
  return (
    <Router history={customHistroy}>
      {/* 使用Suspense 包裹所有内容 */}
      <Suspense fallback="loading...">	//fallback可以写jsx代码，可以使用组件制作loding效果
        <div className="app">
          <Switch>
            <Route path="/" exact render={() => <Redirect to="/home" />} />
            <AuthRoute path="/home" component={Layout} />
            <Route path="/login" component={Login} />
            {/* 404 */}
            <Route>
              <NotFound />
            </Route>
          </Switch>
        </div>
      </Suspense>
    </Router>
  )
}

yarn add  @craco/craco
//或者
 npm install  @craco/craco --save

const { whenProd, getPlugin, pluginByName } = require('@craco/craco')
// whenProd => when production 针对生产环境做处理
// whenProd()第一个参数，在生产环境中，第二个参数，默认值
// whenProd(() => {},[])
const path = require('path')
module.exports = {
  // webpack配置
  webpack: {
    // 配置别名
    alias: {
      // 约定:使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src'),
    },
    configure: (webpackConfig) => {
      // 生产环境下，配置 externals
      webpackConfig.externals = whenProd(
        () => ({
          react: 'React',
          'react-dom': 'ReactDOM',
          redux: 'Redux',
          'react-router-dom': 'ReactRouterDOM',
        }),
        {}
      )
      // 拿到 HtmlWebpackPlugin 插件
      const { isFound, match } = getPlugin(
        webpackConfig,
        pluginByName('HtmlWebpackPlugin')
      )
      // 生产环境下，暴露 CDN 链接到模板页面中
      if (isFound) {
        // match 表示当前匹配的插件 HtmlWebpackPlugin
        // 通过 options 将额外的数据添加给 HtmlWebpackPlugin 插件
        // options可以传递任意数据，比如，此处我们自己写的 cdn 就是要额外传递的数据
        match.options.cdn = {
          // js 链接
          js: whenProd(
            () => [
              'https://cdn.bootcdn.net/ajax/libs/react/18.2.0/cjs/react-jsx-dev-runtime.production.min.js',
              'https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/cjs/react-dom-server-legacy.browser.production.min.js',
              'https://cdn.bootcdn.net/ajax/libs/redux/4.2.1/redux.min.js',
              'https://cdn.bootcdn.net/ajax/libs/react-router-dom/6.10.0/react-router-dom.production.min.js',
            ],
            []
          ),
          // css 链接
          css: [],
        }
      }
      return webpackConfig
    },
  },
}

	
 <div id="root"></div>
      <!-- 加载第三方包的 CDN链接 -->
      <% htmlWebpackPlugin.options.cdn.js.forEach(cdnURL => { %>
      	<script src="<%= cdnURL %>"></script>
      <% }) %>
</body>

// pages/Article/index.js
import { Channels } from '@/components/Channels'
export default function Article() {
    ...
    return(
        <Form>
            <Form.Item label="频道：" name="channel_id">
                <Channels/>
            </Form.Item>
        </Form>
    )
}

// components/Channels
import { Select } from 'antd'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getChannels } from '@/store/actions'

//不是受控组件
export const Channels = ({ ...rest }) => {		// 接收到表单的参数
  console.log(rest)		// {value: undefined, id: 'channel_id', onChange: ƒ}	更换频道也拿不到当前值
  const dispatch = useDispatch()
  const { channels } = useSelector((value) => value.article)
  useEffect(() => {
    dispatch(getChannels())		//分发获取参数的状态
  }, [dispatch])
  return (
    <Select
      placeholder="请选择文章频道"
    >
      {channels.map((items) => (
        <Select.Option key={items.id} value={items.id}>
          {items.name}
        </Select.Option>
      ))}
    </Select>
  )
}

// 改为受控组件，给Select组件添加value，onChange属性,width是自定义参数，可以自定义样式
export const Channels = ({ value,onChange,width }) => {
  const dispatch = useDispatch()
  const { channels } = useSelector((value) => value.article)
  useEffect(() => {
    dispatch(getChannels())
  }, [dispatch])
  return (
    <Select
      style={
        {
          width,
        }
      }
      placeholder="请选择文章频道"
      value={value}		// 指定当前选中的条目
      onChange={onChange}	//选中 option，或 input 的 value 变化时，调用此函数
    >
      {channels.map((items) => (
        <Select.Option key={items.id} value={items.id}>
          {items.name}
        </Select.Option>
      ))}
    </Select>
  )
}

import { Channels } from '@/components/Channels'
export default function Article() {
    ...
    return(
        <Form>
            <Form.Item label="频道：" name="channel_id">
                <Channels width={xxx}/>
            </Form.Item>
        </Form>
    )
}

// App.js

import { AuthRoute } from './components/AuthRoute'
<Router>
    <Switch>
        {/* <Route path="/home" component={Layout} /> */}
        {/* 自己封装路由组件 */}
        <AuthRoute path="/home" component={Layout} />
	</Switch>
</Router>

// components/AuthRoute.js

import { Route, Redirect } from 'react-router-dom'	
// 为utils下所有模块统一暴露
import { isTOken } from '@/utils'	//isTOken函数返回一个布尔值，确认localStorage是否存有token  const isTOken = () => Boolean(getToken())

//接收到路由组件的传参，解构除了component属性的剩余参数,  conponent重命名
export const AuthRoute = ({ component: Component, ...rest }) => {	
  // console.log(rest)
  return (		// 返回一个<Route/>
    <Route
      {...rest}		//将接收到的参数再传给<Route/>组件
      render={(props) =>	//render的回调函数，按条件渲染一个路由组件，传入props参数
        isTOken() ? (		// 判断是否有token
          <Component />		// 有token，正常渲染路由组件
        ) : (
          <Redirect			// 无token
            to={{
              pathname: '/login',	// 重定向到login组件
              state: { from: props.location.pathname },		// 向路由组件传递state参数，props.location.pathname 为当前路由组件路径
            }}
          />
        )
      }
    />
  )
}

// pages/Login/login.js

import { useHistory, useLocation } from 'react-router-dom'
export default function Login() {
  const dispatch = useDispatch()
  const history = useHistory()
  const location = useLocation()
  const onFinish = async (values) => {
    try {
      await dispatch(login({ mobile: values.mobile, code: values.code }))
      message.success('登录成功！', 1.5, () => {
        //根据路由地址跳转页面，location?.state?.from的值要么是原来页面的路由，要么为undefined，当左侧操作符为 undefined和null时，?? 执行右侧操作数
        history.replace(location?.state?.from ?? '/home')		
      })
    } catch (e) {
      message.warning(
        e.response
          ? e.response?.data?.message ?? '出错了~'
          : '网络繁忙，请稍后再试',
        1.5
      )
    }
  }
  return (...)
}

npm install --save redux
或
yarn add redux

// 定义了一个add函数，函数返回一个action对象
const add = (payload) => ({ type: 'add', payload })

const reducer = (state, action) => {
  switch (action.type) {
    case 'add':
      return (state = state + action.payload)
    default:
      return state
  }
}
reducer(0,add(1))
// 等价于
// reducer(0,{ type: 'add', payload:1 })

import { configureStore } from '@reduxjs/toolkit'
// action
const Add = (payload) => ({ type: 'add', payload })
// reducer
const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'add':
      return state + action.payload
    default:
      return state
  }
}
// 创建一个store实例
const store = configureStore({ reducer })
// 每次state更新时,打印日志,getState,获取最新state
// 返回一个函数来注销监听器
const unsubscribe = store.subscribe(() => console.log('state:',store.getState()))   //1  3
// dispatch，更新state
store.dispatch(Add(1))
store.dispatch(Add(2))

// 停止监听state更新
unsubscribe()

// configureStore是用来替代createStore方法
const store = configureStore({
reducer:xxx,	
preloadedState：xxx,		//初始化状态
})

// action
const Add = (payload) => ({ type: 'add', payload })
// reducer
const reducer = (state, action) => {		// 这里没有给 state赋值，所以返回undefined.可以这样给state赋值：state = 0
  console.log('reducer',state,action);		//reducer undefined {type: '@@redux/INITr.5.x.p.5'}
  switch (action.type) {
    case 'add':
      return state + action.payload
    default:
      return state
  }
}
// store
const store = configureStore({reducer})		// 只要创建了store，redux就会调用一次reducer

reducer undefined {type: '@@redux/INITr.5.x.p.5'}

import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import App from './App'
import store from './store'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

// 1. 在pages/Layout/index.js中，分发获取个人信息的异步action
import { useDispatch, useSelector } from 'react-redux'		//useDispatch用来分发一个action
import { getUserInfo } from '@/store/actions'
export default function GeekLayout() {
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(getUserInfo())		// 这里的函数由actions组件提供，根据接口所需要的数据，来决定getUserInfo()要不要填入实参
    }, [dispatch])		
    ...
    return(
    	...
        {name}
    )
}

// 2. 在 store/actions/user.js中，创建异步action并获取个人信息
import { http } from '@/utils'				// 封装了axios，简写了请求地址
export const getUserInfo = () => {			// 异步action可以是一个函数，也可以是一个对象，同步action只能是一个对象
  return async (dispatch, getState) => {	// dispatch, getState是由thunk中间件提供的参数
    const { login: token } = getState()		// getState是一个函数，返回redux中存储的状态，这里解构拿到了login对象的值，重命名为token
    const res = await http.get('/v1_0/user/profile', {
      headers: {
        Authorization: `Bearer ${token}`,	// 传入个人信息所需要提供的token
      },
    })
    // 3.将接口返回的信息 dispatch到reducer来存储该状态
    dispatch({ type: 'user/userInfo', payload: res.data.data })		
  }
}

// 4. 在 store/reducers/user.js中，处理个人信息的action，将状态存储到redux中
const initialState = {}		// 因为个人信息状态是一个对象，所以默认状态为一个对象
export const user = (state = initialState, action) => {
  switch (action.type) {
    case 'user/userInfo':
      return action.payload
    default:
      return state
  }
}

// 5. 在pages/Layout/index.js中，获取个人信息并展示
import { useDispatch, useSelector } from 'react-redux'		
import { getUserInfo } from '@/store/actions'
export default function GeekLayout() {
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(getUserInfo())	
    }, [dispatch])
    // 拿到redux中的状态
  	const { name } = useSelector((state) => state.user)
    ...
    return(
    	...
        {name}		// 渲染状态
    )
}

import {combineReducers} from 'redux'
function todos(state = [], action) {
   // 省略处理逻辑...
   return nextState
 }

 function visibleTodoFilter(state = 'SHOW_ALL', action) {
   // 省略处理逻辑...
   return nextState
 }

// 将多个reducer合并根reducer
 let todoApp = combineReducers({
   todos,
   visibleTodoFilter
 })

let nextTodos = todos(state.todos, action)
let nextVisibleTodoFilter = visibleTodoFilter(state.visibleTodoFilter, action)

return {
  todos: nextTodos,
  visibleTodoFilter: nextVisibleTodoFilter
}

// actiontypes目录
const add = 'counter/add'
const sub = 'counter/sub'
export { add, sub }