# 目录结构
-- redux
-- actions
title.tsx
-- reducers
index.tsx
title.tsx
store.tsx
App.tsx
index.tsx
// react + typescript + echarts + less + axios + antd + redux配置环境
"@types/echarts": "^4.9.6",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-redux": "^7.1.16",
"@types/react-router": "^5.1.13",
"@types/react-router-dom": "^5.1.7",
"antd": "^4.15.0",
"axios": "^0.21.1",
"babel-plugin-import": "^1.13.3",
"customize-cra": "^1.0.0",
"echarts": "^5.0.2",
"echarts-for-react": "^3.0.1",
"less": "^4.1.1",
"less-loader": "7.3.0",
"react": "^17.0.1",
"react-app-rewired": "^2.1.8", // 按需打包
"react-dom": "^17.0.1",
"react-redux": "^7.2.3",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.9",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0", // 中间件, 使dispatch支持传函数参数
"typescript": "^4.1.2",
export const onPush = (title: string[], nxtTitle: string) => ({ type: 'PUSH', title, nxtTitle })
export const onBack = (title: string[]) => ({ type: 'BACK', title })
import title from './title'
import { combineReducers } from 'redux'
export default combineReducers({ title })
export default function changeTitle(preState=["主页"], action: any) {
const { type, title, nxtTitle } = action
switch (type) {
case 'PUSH':
return [...title, nxtTitle]
case 'BACK':
return [...title].splice(0, title.length - 1)
default:
return preState
}
}
import reducers from './reducers'
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import { persistStore, persistReducer } from 'redux-persist'
import storageSession from 'redux-persist/lib/storage/session'
const persistConfig = {
key: 'root',
storage: storageSession,
whitelist: ['title']
}
export const store = createStore(persistReducer(persistConfig, reducers), composeWithDevTools(applyMiddleware(thunk)))
export const persistor = persistStore(store)
import { onPush, onBack } from '../src/redux/actions/title'
import { connect } from 'react-redux'
state = {
title: this.props.title[this.props.title.length - 1]
}
onPushTitle = (e: any) => {
switch(e.key) {
case 'DeviceList':
this.props.onPush([...this.props.title], '设备列表')
this.setState({ title: '设备列表' })
break
case 'DataDetail':
this.props.onPush([...this.props.title], '数据分析')
this.setState({ title: '数据分析' })
break
case 'RuleList':
this.props.onPush([...this.props.title], '规则列表')
this.setState({ title: '规则列表' })
break
default:
}
}
onHistoryBack = () => {
if (this.props.title.length > 1) {
window.history.back()
new Promise((resolve) => {
this.props.onBack([...this.props.title])
resolve('状态已更新!')
}).then (() => {
this.setState({ title: this.props.title[this.props.title.length - 1] })
})
}
}
interface ReduxStateToPropsParam {
title: title,
onPush: onPush,
onBack: onBack
}
export default connect(
(mapStateToProps: ReduxStateToPropsParam) => ({ title: mapStateToProps.title }),
{
onPush,
onBack
}
)(AppUI)
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { store, persistor } from './redux/store'
import { PersistGate } from 'redux-persist/integration/react'
import { Provider } from 'react-redux'
import App from './App'
ReactDOM.render(
<BrowserRouter>
<Provider store={store}>
<PersistGate persistor={persistor}>
<App />
</PersistGate>
</Provider>
</BrowserRouter>,
document.getElementById('root')
)