从 0 开始搭建 React 框架
webpack 配置
不再赘述，可参考前三个文章（wenpack5 基本使用 1 - 3）
使用 react
安装 react、react-dom、@babel/preset-react
yarn add react react-dom @babel/preset-react
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="root"></div>
</body>
</html>
// index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';const container = document.getElementById('root'),root = createRoot(container);root.render(<React.StrictMode><App /></React.StrictMode>
);
// class 组件
import React, { PureComponent } from 'react';class App extends PureComponent {constructor(props) {super(props);this.state = {name: 'zhangsan',age: 20};this.changeToLisi = this.changeToLisi.bind(this);}changeToLisi() {this.setState({name: 'lisi'});}changeAge = () => {this.setState({age: 30});}render() {return <div><p>Tis is a class component.</p><p>姓名：{ this.state.name }</p><p>年龄：{ this.state.age }</p><button onClick={this.changeToLisi}>切换名字</button><button onClick={this.changeAge}>切换年龄</button></div>;}
}export default App;
// 函数组件
import React from 'react';const App = () => {return <p>This is react compoment</>;
};export default App;
// .babelrc
{"presets": ["@babel/preset-env", // 不配置这个 class 组件写箭头函数会报错"@babel/preset-react"],"plugins": ["@babel/plugin-transform-runtime"]
}
module.exports = {module: {rules: [// 处理 js，将 es6 转为 es5{test: /\.(js|jsx)$/, // 追加 jsxexclude: /node_modules/,use: ['babel-loader']}}}
};
配置 eslint 和 prettier
在webpack 基本配置中已安装 eslint、eslint-webpack-plugin、@babel/eslint-parser、eslint-plugin-import、stylelint-webpack-plugin。
安装 react 相关的 eslint：eslint-plugin-react、eslint-plugin-react-hooks
yarn add eslint-plugin-react、eslint-plugin-react-hooks
安装 prettier、eslint-config-prettier、eslint-plugin-prettier
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
// .prettierrc.js
module.exports = {// 行宽 default:80printWidth: 110,// tab 宽度 default:2tabWidth: 4,// 使用 tab 键 default:falseuseTabs: false,// 语句行末是否添加分号 default:truesemi: true,// 是否使用单引号 default:falsesingleQuote: true,// 对象需要引号在加 default:"as-needed"quoteProps: 'as-needed',// jsx单引号 default:falsejsxSingleQuote: true,// 最后一个对象元素加逗号 default:"es5"// trailingComma: 'es5',trailingComma: 'none',// 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格 default:truebracketSpacing: true,// 将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）。default:falsejsxBracketSameLine: true,// (x) => {} 是否要有小括号 default:"always"arrowParens: 'avoid',// default:0rangeStart: 0,// default:InfinityrangeEnd: Infinity,// default:falseinsertPragma: false,// default:falserequirePragma: false,// 不包装 markdown text default:"preserve"proseWrap: 'never',// HTML空白敏感性 default:"css"htmlWhitespaceSensitivity: 'strict',// 在 *.vue 文件中 Script 和 Style 标签内的代码是否缩进 default:falsevueIndentScriptAndStyle: true,// 末尾换行符 default:"lf"endOfLine: 'auto',// default:"auto"embeddedLanguageFormatting: 'auto',overrides: [{files: '*.md',options: {tabWidth: 2}}]
};
module.exports = {root: true,env: {browser: true,node: true},globals: {},extends: ['eslint:recommended','plugin:prettier/recommended','plugin:react/recommended','plugin:react-hooks/recommended'],plugins: ['import', 'prettier'],parserOptions: {parser: '@babel/eslint-parser',sourceType: 'module',ecmaVersion: 2021,ecmaFeatures: {jsx: true,experimentalObjectRestSpread: true}},rules: [// ...]
};
配置 redux
官方已推荐使用 @reduxjs/toolkit（地址：https://cn.redux.js.org/introduction/why-rtk-is-redux-today）
使用传统 redux
安装 redux、react-redux、redux-thunk
yarn add redux react-redux redux-thunk
// src/store-redux/index.js
import {createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { thunk } from 'redux-thunk';
import { reducer as page1Reducer } from '@pages/page1/reducer';const combinedReducerObj = {page1: combineReducers(page1Reducer)
};const store = createStore(combineReducers(combinedReducerObj),compose(applyMiddleware(thunk)
));export default store;
// src/App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store-redux/index';
import Page1 from '@pages/page1/index.jsx';const App = () => {return <Provider store={store}><Page1 /></Provider>;
};export default App;
// src/pages/page1/reducer.js// 定义 actionType
const ADD_TODO = 'ADD_TODO';
const TODO_TOGGLED = 'TODO_TOGGLED';
const SET_DATA = 'SET_DATA';// 定义 reducer
const todos = (state = [{ id: 1, text: 'zhangsan', completed: false }], action) => {switch (action.type) {case ADD_TODO:return state.concat({id: action.payload.id,text: action.payload.text,completed: false});case TODO_TOGGLED:return state.map(todo => {if (todo.id !== action.payload.id) return todoreturn {...todo,completed: !todo.completed}});default:return state}
};const dataList = (state = [], action) => {if (action.type === SET_DATA) {return action.payload;}return state;
};export const reducer = {todos,dataList
};export const actionTypes = {ADD_TODO,TODO_TOGGLED,SET_DATA
};
// src/pages/page1/actions.js
import { actionTypes } from './reducer';
import { getDataService } from './service';// 同步 action
const addTodo = ({ text }) => {return {type: actionTypes.ADD_TODO,payload: {text,id: Math.random()}};
};const todoToggled = ({ id }) => {return {type: actionTypes.TODO_TOGGLED,payload: {id}};
};const setDataList = data => {return {type: actionTypes.SET_DATA,payload: data};
};// 异步 action
const thunkGetDataList = (data) => {return (dispatch, getState) => {// dispatch(addTodo({ text: 'lisi'}));const page1State = getState().page1;console.log(page1State);getDataService().then(res => {dispatch(setDataList(res.data))});};
};export default {// 同步 actionaddTodo,todoToggled,// 异步 actionsetDataList,thunkGetDataList
};
// src/pages/page1/service.js
// 模拟接口获取数据
export const getDataService = (params) => {console.log(params);return new Promise((resolve, reject) => {const res= {data: [{id: 1,name: 'zhangsan',age: 20},{id: 2,name: 'lisi',age: 30}]};setTimeout(() => {resolve(res);}, 3000)});
};
// src/pages/page1/index.jsx
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import actions from './actions';const Page1 = ({todos,dataList,addTodo,getData}) => {useEffect(() => {getData();}, []);return <div><p>This is App Component.</p>{dataList.map((item, index) => {return (<div key={item.id}><p>id: {item.id}；姓名: {item.name}；年龄：{item.age}</p></div>);})}<p>-------------------------------------------</p>{todos.map((item, index) => {return (<div key={item.id}><p>id: {item.id}；text: {item.text}；compoleted: {item.completed}</p></div>);})}<button onClick={addTodo}>添加</button></div>;
};const mapStateToProps = (state, props) => {// let stateCommon = state.common;const statePage1 = state.page1;return {todos: statePage1.todos,dataList: statePage1.dataList};},mapDispatchToProps = (dispatch, props) => {return {addTodo: () => {dispatch(actions.addTodo({ id: 4, text: 'zzz' }));},getData: () => {dispatch(actions.thunkGetDataList());}};};export default connect(mapStateToProps,mapDispatchToProps
)(React.memo(Page1));
使用 @reduxjs/toolkit
安装 @reduxjs/toolkit、react-redux
yarn add @reduxjs/toolkit react-redux
官方使用方案
创建 store
// src/store/index.js
import { configureStore } from '@reduxjs/toolkit';
import commonReducer from './common/reducer';
import HomeReducer from '@pages/home/reducer';export const store = configureStore({// 合并所有的 reducerreducer: {common: commonReducer,home: HomeReducer},// 解决 redux 无法序列化 数据时的报错middleware: getDefaultMiddleware => getDefaultMiddleware({ serializableCheck: false })
});export default store.dispatch;
创建 reducerSlice
configureStore创建store- 在根节点通过
Provider传入store createSlice创建reducer切片：传入name、初始状态、定义reducer，生成reducer和actions；- 页面上使用：通过
useSlector获取状态；useDispatch分发action
// src/page2/reducer.js
import { createSlice } from '@reduxjs/toolkit';const todosSlice = createSlice({name: 'page2', // 命名空间initialState: {counter: 0,todoList: []}, // 初始值reducers: {counterIncrement: state => {// Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它// 并不是真正的改变状态值，因为它使用了 Immer 库// 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的// 不可变的状态state.counter += 1;},counterDecrement: state => {state.counter -= 1;},counterIncrementByAmount: (state, action) => {state.counter += action.payload;},todoListAdded(state, action) {state.todoList.push({id: action.payload.id,text: action.payload.text,completed: false});},todoListToggled(state, action) {const todoItem = state.todoList.find(todo => todo.id === action.payload);todoItem.completed = !todoItem.completed;}}
});// 普通 action
export const {counterDecrement,counterIncrement,counterIncrementByAmount,todoListAdded,todoListToggled
} = todosSlice.actions;export const actions = todosSlice.actions;// reducer
export default todosSlice.reducer;
// store/index.js
import { configureStore } from '@reduxjs/toolkit';
import page2Reducer from '@pages/page2/reducer';export const store = configureStore({// 传入所有的 reducer， configureStore 会帮我们自动合并 reducerreducer: {page2: page2Reducer}
});
// src/pages/page2/index.jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { actions } from './reducer';const Page2 = () => {const { counter, todoList } = useSelector(state => state.page2), // 获取状态dispatch = useDispatch();return <div><p>This is App Component.</p><p>计数器：{ counter }</p>{todoList.map((item, index) => {return (<div key={item.id}><p>id: {item.id}</p><p>text: {item.text}</p><p>completed: {String(item.completed)}</p></div>);})}<button onClick={() => dispatch(actions.counterIncrement())}>计数器添加</button><button onClick={() => dispatch(actions.counterDecrement())}>计数器减少</button><button onClick={() => dispatch(actions.counterIncrementByAmount(5))}>计数器每次+5</button><button onClick={() => dispatch(actions.todoListAdded({ id: 1, text: 'zhangsan' }))}>添加</button><button onClick={() => dispatch(actions.todoListToggled(1))}>切换状态</button></div>;
};export default React.memo(Page2);
处理异步操作 createAsyncThunk
传统 redux 需要使用安装 redux-thunk。
redux toolkit 使用 createAsyncThunk API 简化异步调用。
// src/pages/page2/asyncActions.js
import { createAsyncThunk } from '@reduxjs/toolkit';
import { actions } from './reducer';// 模拟接口获取数据
const getDataService = (params) => {console.log(params);return new Promise((resolve, reject) => {const res= {data: [{id: 1,name: 'zhangsan',age: 20},{id: 2,name: 'lisi',age: 30}]};setTimeout(() => {resolve(res);}, 3000)});
};// 定义异步 action
export const asyncGetData = createAsyncThunk('page2/fetchPosts', async (payload, { dispatch, getState }) => {// 通过 payload 可以接收数据const { params } = payload;// 通过 getState 可以获取 storeconst { counter } = getState().page2;console.log(counter);// 通过 dispatch 可以分发 action// 在 createAsyncThunk 可以 dispatch 普通的 actiondispatch(actions.counterIncrement());// 在 createAsyncThunk 也可以 dispatch 异步 actiondispatch(asyncSetLocale({ locale: 'pl' }));const response = await getDataService(params);// 在这里 return 的数据，需要在 createSlice 的 extraReducers 里进行处理，更新 statereturn {dataList: response.data};
});export const asyncSetLocale = createAsyncThunk('page2/setLocael', async (payload, { dispatch, getState }) => {return {locale: payload.locale,menuList: [{id: 11,menuName: '电站'}]};});// 导出异步 actions
const asyncActions = {asyncGetData,asyncSetLocale
};export default asyncActions;
// src/pages/page2/reducer.js
import { createSlice } from '@reduxjs/toolkit';
import asyncActions from './asyncAtions';const todosSlice = createSlice({name: 'page2', // 命名空间initialState: {counter: 0,todoList: [],dataList: [], // 接口返回的数据locale: 'en',menuList: []}, // 初始值reducers: {counterIncrement: state => {// Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它// 并不是真正的改变状态值，因为它使用了 Immer 库// 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的// 不可变的状态state.counter += 1;},counterDecrement: state => {state.counter -= 1;},},extraReducers: builder => {builder.addCase(asyncActions.asyncGetData.fulfilled, (state, action) => {// 接收 createAsyncThunk 中 return 的数据const { dataList } = action.payload;// 设置 statestate.dataList = dataList;});builder.addCase(asyncActions.asyncSetLocale.fulfilled, (state, action) => {const {locale,menuList} = action.payload;state.locale = locale;state.menuList = menuList;});}
});// 普通 action
export const {counterDecrement,counterIncrement,
} = todosSlice.actions;export const actions = todosSlice.actions;// reducer
export default todosSlice.reducer;
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import asyncActions from './asyncAtions';const Home = () => {const { counter, todoList, locale, menuList, dataList } = useSelector(state => state.page2), // 获取状态dispatch = useDispatch();useEffect(() => {// 调用异步 actiondispatch(asyncActions.asyncGetData({ query: '参数1' }));}, []);return <div><p>This is App Component.</p>{/* <p>计数器：{ counter }</p> */}<p>当前语言： { locale }</p>{dataList.map((item, index) => {return (<div key={item.id}><p>id: {item.id}；姓名: {item.name}；年龄：{item.age}</p></div>);})}<p>-------------------------------------------</p>{menuList.map((item, index) => {return (<div key={item.id}><p>id: {item.id}；菜单: {item.menuName}；</p></div>);})}</div>;
};export default React.memo(Home);
简化 reducerSlice 和 createAsyncThunk
简化 createAsyncThunk
由于 createAsyncThunk 内部就可以直接 dispatch 一个普通的 action，就可以直接在这里面通过 dispatch(actions.setXxx('zhangsan')) 的方式修改 state，不需要 return 数据，这样就不用在 createSlice 中编写 extraReducers 。
// src/pages/page2/asyncActions.js
import { createAsyncThunk } from '@reduxjs/toolkit';
import { actions } from './reducer';// 模拟接口获取数据
const getDataService = (params) => {console.log(params);return new Promise((resolve, reject) => {const res= {data: [{id: 1,name: 'zhangsan',age: 20},{id: 2,name: 'lisi',age: 30}]};setTimeout(() => {resolve(res);}, 3000)});
};// 定义异步 action
export const asyncGetData = createAsyncThunk('page2/fetchPosts', async (payload, { dispatch, getState }) => {// 通过 payload 可以接收数据const { params } = payload;// 通过 getState 可以获取 storeconst { counter } = getState().page2;console.log(counter);// 通过 dispatch 可以分发 action// 在 createAsyncThunk 可以 dispatch 普通的 actiondispatch(actions.counterIncrement());// 在 createAsyncThunk 也可以 dispatch 异步 actiondispatch(asyncSetLocale({ locale: 'pl' }));const response = await getDataService(params);// 在这里 return 的数据，需要在 createSlice 的 extraReducers 里进行处理，更新 state// return {// dataList: response.data// };// 直接在这里 setStatedispatch(actions.setDataList(response.data));
});export const asyncSetLocale = createAsyncThunk('page2/setLocael', async (payload, { dispatch, getState }) => {// return {// locale: payload.locale,// menuList: [{// id: 11,// menuName: '电站'// }]// };// 直接在这里 setStatedispatch(actions.setLocale(payload.locale));dispatch(actions.setMenuList([{ id: 11, menuName: '电站' }]));});// 导出异步 actions
const asyncActions = {asyncGetData,asyncSetLocale
};export default asyncActions;
// src/pages/page2/reducer.js
import { createSlice } from '@reduxjs/toolkit';
import asyncActions from './asyncAtions';const todosSlice = createSlice({name: 'page2', // 命名空间initialState: {counter: 0,todoList: [],dataList: [], // 接口返回的数据locale: 'en',menuList: []}, // 初始值reducers: {counterIncrement: state => {// Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它// 并不是真正的改变状态值，因为它使用了 Immer 库// 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的// 不可变的状态state.counter += 1;},counterDecrement: state => {state.counter -= 1;},setDataList(state, action) {state.dataList = action.payload;},setLocale(state, action) {state.locale = action.payload;},setMenuList(state, action) {state.menuList = action.payload;}},// extraReducers: builder => {// builder.addCase(asyncActions.asyncGetData.fulfilled, (state, action) => {// // 接收 createAsyncThunk 中 return 的数据// const { dataList } = action.payload;//// // 设置 state// state.dataList = dataList;// });//// builder.addCase(asyncActions.asyncSetLocale.fulfilled, (state, action) => {// const {// locale,// menuList// } = action.payload;//// state.locale = locale;// state.menuList = menuList;// });// }
});export const actions = todosSlice.actions;// reducer
export default todosSlice.reducer;
// src/pages/page2/index.jsx
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import asyncActions from './asyncAtions';const Home = () => {const { counter, todoList, locale, menuList, dataList } = useSelector(state => state.page2), // 获取状态dispatch = useDispatch();useEffect(() => {dispatch(asyncActions.asyncGetData({ query: '参数1' }));}, []);return <div><p>This is App Component.</p>{/* <p>计数器：{ counter }</p> */}<p>当前语言： { locale }</p>{dataList.map((item, index) => {return (<div key={item.id}><p>id: {item.id}；姓名: {item.name}；年龄：{item.age}</p></div>);})}<p>-------------------------------------------</p>{menuList.map((item, index) => {return (<div key={item.id}><p>id: {item.id}；菜单: {item.menuName}；</p></div>);})}</div>;
};export default React.memo(Home);
如果你还是想在 cerateAsyncThunk 中通过 return 的形式返回状态。那么可以优化 extraReducers 的写法，前提是 return 一个对象。
// src/store/createExtraReducers.js
export const createExtraReducers = (actions = {}) => {const extraReducers = {};for (const action in actions) {if (actions.hasOwnProperty(action)) {// action 的异步任务执行完成才修改 stateextraReducers[actions[action].fulfilled] = (state, { payload }) => {for (const key in payload) {if (Object.hasOwnProperty.call(payload, key)) {if (key !== 'callback') {state[key] = payload[key];} else {payload.callback && payload.callback();}}}};}}return extraReducers;
};
// src/pages/page2/reducer.js
import { createSlice } from '@reduxjs/toolkit';
import asyncActions from './asyncAtions';
import { createExtraReducers } from '@store/createExtraReducers.js';const extraReducers = createExtraReducers(asyncActions);const todosSlice = createSlice({name: 'page2', // 命名空间initialState: {counter: 0,todoList: [],dataList: [], // 接口返回的数据locale: 'en',menuList: []}, // 初始值reducers: {counterIncrement: state => {// Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它// 并不是真正的改变状态值，因为它使用了 Immer 库// 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的// 不可变的状态state.counter += 1;},counterDecrement: state => {state.counter -= 1;},setDataList(state, action) {state.dataList = action.payload;},setLocale(state, action) {state.locale = action.payload;},setMenuList(state, action) {state.menuList = action.payload;}},extraReducers: builder => {for (const actionCase in extraReducers) {if (extraReducers.hasOwnProperty(actionCase)) {builder.addCase(actionCase, (state, action) =>extraReducers[actionCase](state, action));}}}
});export const actions = todosSlice.actions;// reducer
export default todosSlice.reducer;
import { createAsyncThunk } from '@reduxjs/toolkit';
import { actions } from './reducer';// 模拟接口获取数据
const getDataService = (params) => {console.log(params);return new Promise((resolve, reject) => {const res= {data: [{id: 1,name: 'zhangsan',age: 20},{id: 2,name: 'lisi',age: 30}]};setTimeout(() => {resolve(res);}, 3000)});
};// 定义异步 action
export const asyncGetData = createAsyncThunk('page2/fetchPosts', async (payload, { dispatch, getState }) => {// 通过 payload 可以接收数据const { params } = payload;// 通过 getState 可以获取 storeconst { counter } = getState().page2;console.log(counter);// 通过 dispatch 可以分发 action// 在 createAsyncThunk 可以 dispatch 普通的 actiondispatch(actions.counterIncrement());// 在 createAsyncThunk 也可以 dispatch 异步 actiondispatch(asyncSetLocale({ locale: 'pl' }));const response = await getDataService(params);// 在这里 return 的数据，需要在 createSlice 的 extraReducers 里进行处理，更新 statereturn {dataList: response.data};
});export const asyncSetLocale = createAsyncThunk('page2/setLocael', async (payload, { dispatch, getState }) => {return {locale: payload.locale,menuList: [{id: 11,menuName: '电站'}]};});// 导出异步 actions
const asyncActions = {asyncGetData,asyncSetLocale
};export default asyncActions;
简化 createSlice
由于需要给每个 state 定义至少一个修改 state 的方法，为了简化这一步，其实每个 state 只需要定义一个 setState 方法就可以了，处理数据可以放在外部去处理，我们只要传递 newState 即可。
比如定一个 name，修改它直接通过 dispatch(actions.setName('zhangsan'))。
这样就可以封装一个统一的方法，来帮我们自动生成 state 对应的 setState，就不需要每个模块去单独写一遍，提升开发效率。
// src/store/createReducerSlice.js
// 工具方法
import { createSlice, createAction } from '@reduxjs/toolkit';// 为每个 state 创建一个对应的 setState 方法，
// 如果 state 是 name，那么修改 name 则通过 setName 进行修改
// dispatch(simpleActions.setName('zhangsan'))
const createSetState = initialState => {const reducers = {};for (const key in initialState) {if (initialState.hasOwnProperty(key)) {const keyName = 'set' + key.substring(0, 1).toUpperCase() + key.substring(1);reducers[keyName] = (state, { payload }) => {state[key] = payload;};}}return reducers;},createReducerSlice = ({pageIdentify, // 页面 idinitialState = {}, // 定义 state 初始值reducers = {}, // 可选项，自定义 reducer。其他更复杂的操作，比如对数组的添加/删除，如果不想在外部处理，那就在这里定义extraReducers = {} // 可选项，如果 createAsyncThunk 中 return 了需要修改的 state，那么需要传递 extraReducers，统一修改 state；}) => {const updateState = createAction('updateState'),reducerSlice = createSlice({name: pageIdentify,initialState: initialState,// 简单reducerreducers: {// 简单 reducer: 一次只能修改一个状态...createSetState(initialState),// 其他更复杂的操作，比如对数组的添加/删除，如果不想在外部处理，那就在这里定义...reducers},extraReducers: builder => {// 复杂 reducer 一次修改多个 statebuilder.addCase(updateState, (state, { payload }) => {for (const stateKey in payload) {if (payload.hasOwnProperty(stateKey)) {state[stateKey] = payload[stateKey];}}});for (const actionCase in extraReducers) {if (extraReducers.hasOwnProperty(actionCase)) {builder.addCase(actionCase, (state, action) =>extraReducers[actionCase](state, action));}}}});// 自定义 caseReducer：通过 dispatch(caseReducer.updateState({ name: 'zhangsan', age: 20 })) 可一次修改多个 statereducerSlice.caseReducer = {updateState};return reducerSlice;};export default createReducerSlice;
// src/pages/page2/asyncActions.js
import { createAsyncThunk } from '@reduxjs/toolkit';
import { actions } from './reducer';// 模拟接口获取数据
const getDataService = (params) => {console.log(params);return new Promise((resolve, reject) => {const res= {data: [{id: 1,name: 'zhangsan',age: 20},{id: 2,name: 'lisi',age: 30}]};setTimeout(() => {resolve(res);}, 3000)});
};// 定义异步 action
export const asyncGetData = createAsyncThunk('page2/fetchPosts', async (payload, { dispatch, getState }) => {// 通过 payload 可以接收数据const { params } = payload;dispatch(asyncSetLocale({ locale: 'pl' }));const response = await getDataService(params);dispatch(actions.setDataList(response.data));
});export const asyncSetLocale = createAsyncThunk('page2/setLocael', async (payload, { dispatch, getState }) => {dispatch(actions.setLocale(payload.locale));dispatch(actions.setMenuList([{ id: 11, menuName: '电站' }]));});// 导出异步 actions
const asyncActions = {asyncGetData,asyncSetLocale
};export default asyncActions;
// src/pages/page2/reducer.js
// import asyncActions from './asyncAtions';
// import { createExtraReducers } from '@store/createExtraReducers.js';
import createReducerSlice from '@store/createReducerSlice.js';// const extraReducers = createExtraReducers(asyncActions);// 使用二次封装的 createReducerSlice
const reducerSlice = createReducerSlice({pageIdentify: 'page2',initialState: {counter: 0,todoList: [],dataList: [], // 接口返回的数据locale: 'en',menuList: []}, // 初始值// extraReducers
});// 普通 actions
export const actions = reducerSlice.actions;
export const caseReducer = reducerSlice.caseReducer;// reducer
export default reducerSlice.reducer;
配置 react-router
安装 react-router-dom
yarn add react-router-dom
// src/App.js
import React from 'react';
import { Provider } from 'react-redux';
import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
import { store } from './store/index';
import Index from '@pages/index.jsx';
import Login from "./pages/login";
import Register from "./pages/register";
import Home from "./pages/home";
import Station from "./pages/station";
import Device from "./pages/device";const App = () => {return <HashRouter><Provider store={store}><Routes><Route path="/login" element={<Login />} /><Route path="/register" element={<Register />} />{/* 这里是嵌套路由 */}<Route path="/" element={<Index />}>{/* <Route path="/" element={<Navigate to="/home" />} /> 是为了告诉路由 访问 / 的时候跳转哪个组件 */}<Route path="/" element={<Navigate to="/home" />} /><Route path="/home" element={<Home />} /><Route path="/station" element={<Station />} /><Route path="/device" element={<Device />} /></Route></Routes></Provider></HashRouter>;
};export default App;
import React from 'react';
import Header from './components/header';
import Footer from './components/Footer';
import { Outlet } from "react-router-dom";const Index = () => {return (<div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}><Header /><div style={{ width: '100%', flex: 1 }}>{/* 子路由占位 */}<Outlet /></div><Footer /></div>);
};export default React.memo(Index);
配置 Antd5
基本配置
安装 antd、babel-plugin-import
yarn add antd babel-plugin-import
babel-plugin-import 可以实现 antd 按需加载
{"presets": [["@babel/preset-env",{"useBuiltIns": "usage","corejs": {"version": 3}}],"@babel/preset-react"],"plugins": [// 配置 antd 按需加载// 如果要使用 antd 的 theme，需要去掉 babel-plugin-import// [// "import",// {// "libraryName": "antd",// "libraryDirectory": "es",// "style": true// }// ],"@babel/plugin-transform-runtime","@babel/plugin-transform-class-properties"]
}
自定义 antd 主题色
// src/index.js
import React from 'react';
import { Provider } from 'react-redux';
import { createRoot } from 'react-dom/client';
import App from './App.js';
import { store } from './store';
import './css/global.css';const container = document.getElementById('root'),root = createRoot(container);root.render(<React.StrictMode><Provider store={store}><App /></Provider></React.StrictMode>
);
// App.js
import React from 'react';
import { ConfigProvider } from 'antd';
import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
import Index from '@pages/index.jsx';
import useAntdTheme from '@utils/useAntdTheme';
import Login from './pages/login';
import Register from './pages/register';
import Home from './pages/home';
import Station from './pages/station';
import Device from './pages/device';const App = () => {const { antdThemeCustom } = useAntdTheme();return (<HashRouter><ConfigProvider theme={antdThemeCustom}><Routes><Route path='/login' element={<Login />} /><Route path='/register' element={<Register />} /><Route path='/' element={<Index />}><Route path='/' element={<Navigate to='/home' />} /><Route path='/home' element={<Home />} /><Route path='/station' element={<Station />} /><Route path='/device' element={<Device />} /></Route></Routes></ConfigProvider></HashRouter>);
};export default App;
// src/css/theme.js
export default {light: {customYellow1: '#f3cb60',customYellow2: '#332c0a'},night: {customYellow1: '#390d91',customYellow2: '#06046b'},pink: {customYellow1: '#d19dee',customYellow2: '#8d5baf'}
};
// src/common/utils/useAntdTheme.js
import themeMap from '../../css/theme.js';
import { useSelector } from 'react-redux';const useAntdTheme = () => {const { theme } = useSelector(state => state.common),themeColor = theme && themeMap[theme] ? themeMap[theme] : themeMap.light,antdThemeCustom = {token: {colorPrimary: themeColor.customYellow1},components: {// Button: {// colorPrimary: themeColor.customYellow1,// algorithm: true // 启用算法// }}};return {antdThemeCustom,themeColor};
};export default useAntdTheme;
// src/pages/home/index.jsx
import React from 'react';
import { Button } from 'antd';
import { useDispatch } from 'react-redux';
import { simpleActions as commonSimpleActions } from '@store/common/reducer';
import useAntdTheme from '../../common/utils/useAntdTheme';
import styles from './style.scss';const Home = () => {const dispatch = useDispatch(),{ themeColor } = useAntdTheme();console.log(themeColor);return (<div><p className={styles.text}>This is App Component.</p><p style={{ color: themeColor.customYellow1 }}>自定义主题色</p><Button type={'primary'}>antd 主题色按钮</Button><br /><button onClick={() => dispatch(commonSimpleActions.setTheme('night'))}>切换为深色</button><button onClick={() => dispatch(commonSimpleActions.setTheme('light'))}>切换为浅色</button><button onClick={() => dispatch(commonSimpleActions.setTheme('pink'))}>切换为粉色</button></div>);
};export default React.memo(Home);
相关文章：
从 0 开始搭建 React 框架
webpack 配置 不再赘述，可参考前三个文章（wenpack5 基本使用 1 - 3） 使用 react 安装 react、react-dom、babel/preset-react yarn add react react-dom babel/preset-react<!DOCTYPE html> <html lang"en"> <h…...
网站地址怎么改成HTTPS？
现在，所有类型的网站都需要通过 HTTPS 协议进行安全连接，而实现这一目标的唯一方法是使用 SSL 证书。如果您不将 HTTP 转换为 HTTPS，浏览器和应用程序会将您网站的连接标记为不安全。 但用户询问如何将我的网站从 HTTP 更改为 HTTPS。在此页…...
Blender教程（基础）-面的细分与删除、挤出选区-07
一、Blender之面的细分 新建一个立方体，在编辑模式下、选中一个面。 在选中的面上单击右键弹出细分选项，选择细分。 在选中细分后、会默认细分1次。修改细分次数在左下角 二、Blender之面的删除 选择中需要操作的面，在英文状态下按X键弹…...
QT自制软键盘 最完美、最简单、支持中文输入（二）
目录 一、前言 二、本自制虚拟键盘特点 三、中文输入原理 四、组合键输入 五、键盘事件模拟 六、界面 七、代码 7.1 frmKeyBoard 头文件代码 7.2 frmKeyBoard 源文件代码 八、使用示例 九、效果 十、结语 一、前言 由于系统自带虚拟键盘不一定好用，也不一…...
SpringCloud_学习笔记_1
SpringCloud01 1.认识微服务 随着互联网行业的发展，对服务的要求也越来越高，服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢？ 1.0.学习目标 了解微服务架构的优缺点 1.1.单体架构 单体架构ÿ…...
容器算法迭代器初识
#include<iostream> using namespace std; #include<vector> //vetor容器存放内置数据类型 void test01() {//创建了一个vector容器，数组 vector<int> v;//向容器中插入数据v.push_back (10);//尾插 v.push_back (20);v.push_back (30);v.push_ba…...
瑞_力扣LeetCode_二叉搜索树相关题
文章目录 说明题目 450. 删除二叉搜索树中的节点题解递归实现 题目 701. 二叉搜索树中的插入操作题解递归实现 题目 700. 二叉搜索树中的搜索题解递归实现 题目 98. 验证二叉搜索树题解中序遍历非递归实现中序遍历递归实现上下限递归 题目 938. 二叉搜索树的范围和题解中序遍历…...
python爬虫爬取网站
流程： 1.指定url(获取网页的内容) 爬虫会向指定的URL发送HTTP请求，获取网页的HTML代码，然后解析HTML代码，提取出需要的信息，如文本、图片、链接等。爬虫请求URL的过程中，还可以设置请求头、请求参数、请求…...
c# Get方式调用WebAPI,WebService等接口
/// <summary> /// 利用WebRequest/WebResponse进行WebService调用的类 /// </summary> public class WebServiceHelper {//<webServices>// <protocols>// <add name"HttpGet"/>// <add name"HttpPost"/>// …...
银行数据仓库体系实践（11）--数据仓库开发管理系统及开发流程
数据仓库管理着整个银行或公司的数据，数据结构复杂，数据量庞大，任何一个数据字段的变化或错误都会引起数据错误，影响数据应用，同时业务的发展也带来系统不断升级，数据需求的不断增加，数据仓库需…...
微信小程序引导用户打开定位授权通用模版
在需要使用位置信息的页面（例如 onLoad 或 onShow 生命周期函数）中调用 wx.getSetting 方法检查用户是否已经授权地理位置权限： Page({onLoad: function() {wx.getSetting({success: res > {if (res.authSetting[scope.userLocation]) {/…...
JVM篇----第十篇
系列文章目录 文章目录 系列文章目录前言一、JAVA 强引用二、JAVA软引用三、JAVA弱引用四、JAVA虚引用五、分代收集算法前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧…...
DevSecOps 参考模型介绍
目录 一、参考模型概述 1.1 概述 二、参考模型分类 2.1 DevOps 组织型模型 2.1.1 DevOps 关键特性 2.1.1.1 模型特性图 2.1.1.2 特性讲解 2.1.1.2.1 自动化 2.1.1.2.2 多边协作 2.1.1.2.3 持续集成 2.1.1.2.4 配置管理 2.1.2 DevOps 生命周期 2.1.2.1 研发过程划分…...
什么是okhttp？
OkHttp简介： OkHttp 是一个开源的、高效的 HTTP 客户端库，由 Square 公司开发和维护。它为 Android 和 Java 应用程序提供了简单、强大、灵活的 HTTP 请求和响应的处理方式。OkHttp 的设计目标是使网络请求变得更加简单、快速、高效，并且支持…...
R语言基础学习-02 （此语言用途小众 用于数学 生物领域 基因分析）
变量 R 语言的有效的变量名称由字母，数字以及点号 . 或下划线 _ 组成。 变量名称以字母或点开头。 变量名是否正确原因var_name2.正确字符开头，并由字母、数字、下划线和点号组成var_name%错误% 是非法字符2var_name错误不能数字开头 .var_name, var.…...
CTF-WEB的入门真题讲解
EzLogin 第一眼看到这个题目我想着用SQL注入 但是我们先看看具体的情况 我们随便输入admin和密码发现他提升密码不正确 我们查看源代码 发现有二个不一样的第一个是base64 意思I hava no sql 第二个可以看出来是16进制转化为weak通过发现是个弱口令 canyouaccess 如果…...
【C项目】顺序表
简介：本系列博客为C项目系列内容，通过代码来具体实现某个经典简单项目 适宜人群：已大体了解C语法同学 作者留言：本博客相关内容如需转载请注明出处，本人学疏才浅，难免存在些许错误，望留言指正 作…...
【Docker】在Windows下使用Docker Desktop创建nginx容器并访问默认网站
欢迎来到《小5讲堂》，大家好，我是全栈小5。 这是《Docker容器》序列文章，每篇文章将以博主理解的角度展开讲解， 特别是针对知识点的概念进行叙说，大部分文章将会对这些概念进行实际例子验证，以此达到加深对…...
详讲api网关之kong的基本概念及安装和使用（二）
consul的服务注册与发现 如果不知道consul的使用，可以点击上方链接，这是我写的关于consul的一篇文档。 upstreamconsul实现负载均衡 我们知道，配置upstream可以实现负载均衡，而consul实现了服务注册与发现，那么接下来…...
取消Vscode在输入符号时自动补全
取消Vscode在输入符号时自动补全 取消Vscode在输入符号时自动补全问题演示解决方法 取消Vscode在输入符号时自动补全 问题演示 在此状态下输入/会直接自动补全, 如下图 笔者想要达到的效果为可以正常输入/而不进行补全, 如下图 解决方法 在设置->文本编辑器->建议, 取消…...
ElementUI Form：Input 输入框
ElementUI安装与使用指南 Input 输入框 点击下载learnelementuispringboot项目源码 效果图 el-input.vue 页面效果图 项目里el-input.vue代码 <script> export default {name: el_input,data() {return {input: ,input1: ,input2: ,input3: ,input4: ,textarea: …...
Vue_Router_守卫
路由守卫：路由进行权限控制。 分为：全局守卫，独享守卫，组件内守卫。 全局守卫 //创建并暴露 路由器 const routernew Vrouter({mode:"hash"//"hash路径出现#但是兼容性强，history没有#兼容性差"…...
GDB调试技巧实战--自动化画出类关系图
1. 前言 上节我们在帖子《Modern C++利用工具快速理解std::tuple的实现原理》根据GDB的ptype命令快速的理解了std::tuple数据结构的实现，但是手动一个个打印，然后手动画出的UML图，这个过程明显可以自动化。 本文旨在写一个GDB python脚本把这个过程自动化。 本脚本也可以用…...
python使用Schedule
目录 一：使用场景： 二：参数 三：实例 "Schedule"在Python中通常指的是时间调度或任务计划。Python中有多个库可以用来处理时间调度和任务计划，其中最流行的是schedule库。 一&#x…...
Linux系列之查看cpu、内存、磁盘使用情况
查看磁盘空间 df命令用于显示磁盘分区上的可使用的磁盘空间。默认显示单位为KB。可以利用该命令来获取硬盘被占用了多少空间，目前还剩下多少空间等信息。使用df -h命令，加个-h参数是为了显示GB MB KB单位，这样更容易查看 Filesystem …...
【C语言】socket编程接收问题
一、recv()函数接收到的返回值为0表示对端已经关闭 在TCP套接字编程中，通过recv()函数接收到的返回值为0通常表示对端已经关闭了套接字的发送部分。这是因为TCP是一个基于连接的协议，其中有定义明确的连接建立和终止流程；当对端调用close()或…...
Python与ArcGIS系列（二十）GDAL之合并shp和geojson要素图层
目录 0 简述1 代码实现2 结果展示0 简述 Shp格式是GIS中非常重要的数据格式，主要在Arcgis中使用，但在进行很多基于网页的空间数据可视化时，通常只接受GeoJSON格式的数据，众所周知JSON是利用键值对+嵌套来表示数据的一种格式，以其轻量、易解析的优点，被广泛使用与各种领域…...
CGAL5.4.1 边塌陷算法
目录 1、使用曲面网格的示例 2、使用默认多面体的示例 3、使用丰富多面体的示例 主要对1、使用曲面网格的示例 进行深度研究 CGAL编译与安装CGAL安装到验证到深入_cgal测试代码-CSDN博客 参考资料CGAL 5.4.5 - Triangulated Surface Mesh Simplification: User Manual …...
网络安全知识和华为防火墙
网络安全 网络空间安全 ---Cyberspace 2003年美国提出的网络空间概念 ---一个由信息基础设施组成的互相依赖的网络。 我国官方文件定义：网络空间为继海、陆、空、天以外的第五大人类互动领域。 通信保密阶段 --- 计算机安全阶段 --- 信息系统安全 --- 网络空间安…...
Docker 搭建MySQL主从复制-读写分离
一. 介绍 MySQL主从复制是一种常用的数据库高可用性解决方案，通过在主数据库上记录的数据变更，同步到一个或多个从数据库，实现数据的冗余备份和读写分离。在Docker环境下搭建MySQL主从复制和读写分离，不仅方便管理，还…...