mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
note about devtooling
This commit is contained in:
@@ -11,6 +11,26 @@ We also see how we may compose the reducers according to the shape.
|
|||||||
If you want a really neat UI to show what the store looks when actions are dispatched to the store, use this Chrome extension:
|
If you want a really neat UI to show what the store looks when actions are dispatched to the store, use this Chrome extension:
|
||||||
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
|
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
|
||||||
|
|
||||||
|
# Dispatch
|
||||||
|
|
||||||
|
As long as there is a store reference, you can dispatch an action to trigger the middleware and reducers which in term changes the store which in turn will cause re-renders in the view.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
store.dispatch(actions.addTodo('id0', 'hello world'));
|
||||||
|
```
|
||||||
|
|
||||||
|
> Note: It is important to note that dispatches in general have a "fire and forget" approach. We expect React to re-render the UI correct on its own accord. Rendering isn't necessarily synchronous in React!
|
||||||
|
|
||||||
|
# `getState()`
|
||||||
|
|
||||||
|
To examine the state of the store, you can call `getState()` to get the current snapshot of the state.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
store.getState();
|
||||||
|
```
|
||||||
|
|
||||||
|
The Chrome / Firefox extension is a work of genius! It lets you replay actions and step backwards to debug the current state of Redux. In a large enough application, this kind of debuggability is invaluable! It also helps developers that are not immediately familiar with your application to quickly get a handle on how the state changes over some actions.
|
||||||
|
|
||||||
# Exercise
|
# Exercise
|
||||||
|
|
||||||
## Visualize the state changes with Chrome extension
|
## Visualize the state changes with Chrome extension
|
||||||
|
|||||||
Reference in New Issue
Block a user