mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
@@ -18,14 +18,14 @@ Facebook invented a the Flux pattern to solve this shared state issue. Redux is
|
||||
|
||||
These are the React Components that consume the store as its data. There is a special way Redux will map its data from the state tree into the different React Components. The Components will know to re-render when these bits of state are changed.
|
||||
|
||||
## Action
|
||||
|
||||
Actions are messages that represent some event, such as a user's action or a network request. With the aid of _reducers_, they affect the overall state.
|
||||
|
||||
## Store
|
||||
|
||||
This is a singleton state tree. The state tree is immutable and needs to be re-created at every action. This helps connected views to know when to update itself - just doing a simple reference comparison rather than a deep comparison.
|
||||
|
||||
## Action
|
||||
|
||||
Actions are messages to be dispatched to the store to let reducers to change (replace reference of) the state tree.
|
||||
|
||||
## Reducers
|
||||
|
||||
These are simple stateless, pure functions that takes state + action message and returns a copy of state some modifications according to the action message type and payload.
|
||||
|
||||
@@ -15,9 +15,11 @@ https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfk
|
||||
|
||||
## Visualize the state changes with Chrome extension
|
||||
|
||||
1. Install that Chrome extension
|
||||
1. Install [Chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
|
||||
|
||||
2.
|
||||
2. Open the inspector panel entitled **Redux**
|
||||
|
||||
3. Modify `exercise/src/index.tsx` to dispatch actions
|
||||
|
||||
## Playing with dispatching actions inside tests
|
||||
|
||||
|
||||
@@ -18,6 +18,8 @@ This `mapStateToProps` function selects out portions of the state tree. This fun
|
||||
|
||||
2. open up `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps`
|
||||
|
||||
3. uncomment the bottom bits of code and fill in the implementation for `mapStateToProps()` and `mapDispatchToProps()` - feel free to use `TodoListItem.tsx` as a guide
|
||||
3. Remove the `export` from `export const TodoFooter = (props: TodoFooterProps) => {`
|
||||
|
||||
4. do steps 2 and 3 for the `TodoHeader.tsx` file
|
||||
4. uncomment the bottom bits of code and fill in the implementation for `mapStateToProps()` and `mapDispatchToProps()` - feel free to use `TodoListItem.tsx` as a guide
|
||||
|
||||
5. do steps 2, 3, and 4 for the `TodoHeader.tsx` file
|
||||
|
||||
@@ -43,11 +43,7 @@ export const reducer = combineReducers({
|
||||
});
|
||||
```
|
||||
|
||||
# Take a peek at useful helpers and middleware created by community are:
|
||||
|
||||
- immer: https://github.com/mweststrate/immer - improves ergonomics of working with immutables by introducing the concept of mutating a draft
|
||||
|
||||
- redux-starter-kit: https://github.com/reduxjs/redux-starter-kit - help address common concerns of Redux in boilerplate and complexity
|
||||
`combineReducers` handles the grunt-work of sending *actions* to each combined reducer. Therefore, when an action arrives, each reducer is given the opportunity to modify its own state tree based on the incoming action.
|
||||
|
||||
# Exercise
|
||||
|
||||
@@ -68,3 +64,9 @@ The Redux team came up with `redux-starter-kit` to address a lot of boilerplate
|
||||
3. run `npm test` in the root folder to see if it still works!
|
||||
|
||||
4. look at the web app to make sure it still works!
|
||||
|
||||
# Further reading
|
||||
|
||||
- immer: https://github.com/mweststrate/immer - improves ergonomics of working with immutables by introducing the concept of mutating a draft
|
||||
|
||||
- redux-starter-kit: https://github.com/reduxjs/redux-starter-kit - help address common concerns of Redux in boilerplate and complexity
|
||||
|
||||
Reference in New Issue
Block a user