How do I see state when logging to the console instead of Proxy object inside reducer action?

by

Solution

You need to use the current function in order to see the actual value of the state.

In your reducer, you can call:

console.log(current(state));

This current function comes from the Immer package which is a dependency of Redux Toolkit. It is re-exported by Redux Toolkit, so it can be imported from either package:

import { createSlice, current } from '@reduxjs/toolkit';

or

import { createSlice } from '@reduxjs/toolkit';
import { current } from 'immer';

Why do I see a Proxy?

Redux Toolkit’s createSlice and createReducer helper functions allow you to write reducers where you directly modify the state variable. This can save a lot of code and a lot of headaches compared to writing reducers the traditional way, where you must always return a new state object and cannot mutate any values of your state.

It is okay to “mutate” the state variable in a Redux Toolkit reducer because this state variable is not your actual state. It is a Proxy object. Specifically, it is a Immer draft.

The basic idea is that with Immer you will apply all your changes to a temporary draft, which is a proxy of the currentState. Once all your mutations are completed, Immer will produce the nextState based on the mutations to the draft state. This means that you can interact with your data by simply modifying it while keeping all the benefits of immutable data.

For further reading, see:

What is current()?

The current function is a way to access the current state of the draft object for debugging. Otherwise, you would see the draft itself which is a Proxy and that’s not very helpful. You probably won’t ever use current for anything other than console logging.

This function is part of the Immer package and it is re-exported by Redux Toolkit specifically for this purpose.

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.

For further reading, see:

More Related Contents:

  1. What is mapDispatchToProps?
  2. What is the best way to access redux store outside a react component?
  3. Use Connect or pass data as props to children
  4. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  5. Use history.push in action creator with react-router-v4?
  6. How does connect work without mapDispatchToProps
  7. how to set initial state in redux
  8. My Redux state has changed, why doesn’t React trigger a re-render?
  9. axios post request to send form data
  10. React Context vs React Redux, when should I use each one? [closed]
  11. How can I persist redux state tree on refresh?
  12. Attach Authorization header for all axios requests
  13. What is the best way to redirect a page using React Router? [closed]
  14. Understanding React-Redux and mapStateToProps()
  15. React – Display loading screen while DOM is rendering?
  16. React-Redux: Actions must be plain objects. Use custom middleware for async actions
  17. How to reset TabNavigator when user logs out (from other screen)
  18. Next.js – Error: only absolute urls are supported
  19. Stop useEffect from running on mount
  20. How do I access store state in React Redux?
  21. ReactJS lifecycle method inside a function Component
  22. Element type is invalid: expected a string (for built-in components) or a class/function
  23. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  24. React router, pass data when navigating programmatically?
  25. Global state in React Native
  26. How to fix 431 Request Header Fields Too Large in React-Redux app
  27. Redux Presentational Components Vs Container Component
  28. How to enable file upload on React’s Material UI simple input?
  29. Could not find “store” in either the context or props of “Connect(App)”
  30. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes

Leave a Comment