print/modify the Redux store using Chrome Dev Tools's console

user_2174099 0
Viewed 135

I find it useful to be able to print/modify the Redux store via Chrome Dev Tools's console, however to do this I have to copy the store in the window component as follows:

window.store = store;

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);

this way I can later use the console to print for instance the content of the store with window.store.getState():

dev tools store.getstate()

How can I access the store inside the provider directly via the console?

react-redux redux google-chrome-devtools
1 Answers

I want to suggest an alternative: use the Redux Devtools. They are available as a Chrome or Firefox extension, allow you to see current and all past states and all dispatched actions.
If you follow the official recommendations and use Redux Toolkit for your Redux code (modern Redux does not use hand-written switch..case reducers for years any more even though outdated tutorials unfortunately show that; if you need an up-to-date tutorial use the official Redux tutorial), using configureStore will even set up the devtools up for you correctly.

user_20759440
Related