TypeScript环境下, react-redux持久化配置

关注

原创最新推荐文章于 2026-06-28 08:06:16 发布 335 阅读 AI 写同款· GEO 优化 ›

手把手教你调试RTL8201F：从芯片手册解读到LWIP驱动移植本文详细解析了RTL8201F PHY芯片的开发流程，从寄存器配置到LWIP驱动移植，重点介绍了RMII模式下的特殊配置要点和调试技巧。通过实战案例和高级调试方法，帮助工程师解决网络性能问题，实现与FreeRTOS+LWIP协议栈的稳定集成。阅读详情

# 目录结构
-- 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",

配置redux相关

// -- actions title.tsx
// 该文件下放置所有action函数
export const onPush = (title: string[], nxtTitle: string) => ({ type: 'PUSH', title, nxtTitle })
export const onBack = (title: string[]) => ({ type: 'BACK', title })

// -- reducers index.tsx
// 该文件下汇总reducer的文件
import title from './title'
import { combineReducers } from 'redux'
export default combineReducers({  title })

// -- reducers title.tsx
// 用于处理主页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
    }
}

// store.tsx
import reducers from './reducers'
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'																		// 用于异步redux
import { composeWithDevTools } from 'redux-devtools-extension'		// 用于异步redux
import { persistStore, persistReducer } from 'redux-persist'			// 用于配置持久化redux
import storageSession from 'redux-persist/lib/storage/session'		// 用于配置持久化redux

const persistConfig = {
    key: 'root',									// 标识
    storage: storageSession,			// 持久化方式
  	// blacklist: ['helloworld']  // 黑名单中数据不持久化, 根据需要配置
    whitelist: ['title']					// 白名单中数据持久化
}
export const store = createStore(persistReducer(persistConfig, reducers), composeWithDevTools(applyMiddleware(thunk)))
export const persistor = persistStore(store)

配置主App文件

// App.tsx
import { onPush, onBack } from '../src/redux/actions/title'
import { connect } from 'react-redux'
// 文件中的state参数
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] })
        })
    }
}
// Typescript中最烦的类型定义
interface ReduxStateToPropsParam {
    title: title,
    onPush: onPush,
    onBack: onBack
}
// redux配置
export default connect(
    (mapStateToProps: ReduxStateToPropsParam) => ({ title: mapStateToProps.title }),
    {
        onPush,
        onBack
    }
)(AppUI)

配置入口文件

// index.tsx
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')
)