BST Tauri 开发笔记（7）- 使用redux devtools

因为Tauri在操作系统上使用默认的系统浏览器作为webview，所以在mac系统上使用了safari，结果没法使用redux devtools，采用redux remote devtools解决。

remote-redux-devtools

安装模块

npm i remote-redux-devtools @types/remote-redux-devtools -D

修改configureStore

import { configureStore } from '@reduxjs/toolkit'
import devToolsEnhancer from 'remote-redux-devtools'
import { counterReducer } from '../features/counter/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  devTools: false,
  enhancers: [
    devToolsEnhancer({ realtime: true, hostname: 'localhost', port: 8000 }),
  ],
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

启动后发现报错，说 global 对象找不到，因为redux-remote-devtools是给React Native用的，rn里的顶级变量是global，所以打开index.html，在html的head里添加：

<script>
window.global = window
</script>

remotedev-server

安装

npm i remotedev-server -D

修改package.json

  "scripts": {
    ...,
    "remotedev": "remotedev --hostname=localhost --port=8000"
  },

启动

npm run tauri dev
npm run remotedev

打开 http://localhost:8000 应该可以看到redux store的状态了