如何在 redux-toolkit 中查看状态变量？

Question

当我在 reducer 内部的断点处停止并尝试观察状态中的变量时，我只能看到 Proxy，我如何才能看到我的状态的实际内容？

Answer 1

由于RTK使用了Immer提供的immer internally, the state obtained in the reducer is the draft state of Immer. If you want to get the state in the form of a JS plain object, you need to use the current方法。

This can be very useful for debugging purposes (as those objects won't be Proxy objects and not be logged as such)

查看 RTK other-exports#current

The current function from the immer library, which takes a snapshot of the current state of a draft and finalizes it (but without freezing). Current is a great utility to print the current state during debugging, and the output of current can also be safely leaked outside the producer.

另外，参见 Logging Draft State Values

It's very common for a developer to call console.log(state) during the development process. However, browsers display Proxies in a format that is hard to read, which can make console logging of Immer-based state difficult.

当使用 createSlice 或 createReducer 时，您可以使用我们从 immer 库中重新导出的当前实用程序。此实用程序创建当前 Immer Draft 状态值的单独纯文本副本，然后可以将其记录下来以供正常查看。

例如

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/@reduxjs/toolkit@1.6.1/dist/redux-toolkit.umd.js"></script>
</head>

<body>
    <script>
        window.onload = function () {
            const { configureStore, createSlice, current } = window.RTK;

            const counterSlice = createSlice({
                name: 'user',
                initialState: { value: 0 },
                reducers: {
                    increment(state) {
                        console.log('immer draft state: ', state)
                        console.log('js object state: ', current(state))
                        state.value++;
                    },
                },
            });

            const store = configureStore({ reducer: counterSlice.reducer });
            store.dispatch(counterSlice.actions.increment());

        }
    </script>
</body>

</html>

输出：

如何在 redux-toolkit 中查看状态变量？

How to watch state variables in redux-toolkit?

javascript

redux-toolkit