mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
93 lines
3.3 KiB
Markdown
93 lines
3.3 KiB
Markdown
# Step 2.7
|
|
|
|
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
|
|
|
|
# Redux Ecosystem
|
|
|
|
Redux is the most popular Flux implementation, and the ecosystem of related libraries has grown as a result. This is one of the reason why it is a very popular library in use by many products made by Microsoft as well.
|
|
|
|
There had been "awesome lists" that various github users have collected related to tech and articles about redux. Here's just one such list:
|
|
|
|
https://github.com/xgrommx/awesome-redux#react---a-javascript-library-for-building-user-interfaces
|
|
|
|
It is literally impossible to list out all the related tech. In this step, we introduce but one useful library that works with `redux`.
|
|
|
|
# `react-redux`: the Official React Redux Binding
|
|
|
|
That's right, Redux doesn't only work with React. It can be used inside Vue.js, Angular, and React Native, to name a few.
|
|
|
|
## <Provider> Component
|
|
|
|
The store doesn't magically get passed to the views randomly. It has to be supplied by a `react-redux` component called `<Provider>`. It can be placed anywhere, but it's best to just make it available at the root the app:
|
|
|
|
```tsx
|
|
const store = createStore(reducers);
|
|
|
|
const App = () => {
|
|
return (
|
|
<Provider store={store}>
|
|
<div>Hello World!</div>
|
|
</Provider>
|
|
);
|
|
};
|
|
```
|
|
|
|
## connect() higher order function
|
|
|
|
Connect store to view with `react-redux`. `connect()` is used to turn Redux store and dispatch functions into props inside React components. The state and action dispatchers are passed along with a `<Provider>` component.
|
|
|
|
```ts
|
|
const OldComponent = props => {
|
|
return <div>{props.foo}</div>;
|
|
};
|
|
|
|
const NewComponent = connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps,
|
|
mergeProps,
|
|
options
|
|
)(OldComponent);
|
|
```
|
|
|
|
The `connect()` function takes in a few functions that maps some portion of the state tree and dispatcher functions as props. It is a **higher order function** meaning that the return value of `connect()` is a function that decorates OldComponents into a NewComponent with all the mapped props.
|
|
|
|
This `mapStateToProps` function selects out portions of the state tree. This function informs the connected view when to re-render based on a shallow comparison from previous state.
|
|
|
|
```ts
|
|
function mapStateToProps(state) {
|
|
return {
|
|
foo: state.foo
|
|
};
|
|
}
|
|
```
|
|
|
|
The `mapDispatchToProps` are functions that will trigger the action message dispatch mechanism of Redux. It looks like this:
|
|
|
|
```ts
|
|
function mapDispatchToProps(dispatch) {
|
|
return {
|
|
// the dispatched message COULD be generated by an
|
|
// action creator instead
|
|
addTodo: () => dispatch({ type: 'addTodo', ... })
|
|
}
|
|
}
|
|
```
|
|
|
|
# Exercise
|
|
|
|
1. open up `exercise/src/index.tsx` and wrap `<TodoApp>` with `<Provider>` as instructed in the comment
|
|
|
|
2. open up `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps`
|
|
|
|
3. Remove the `export` from `export const TodoFooter = (props: TodoFooterProps) => {`
|
|
|
|
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
|
|
|
|
# Bonus Exercise
|
|
|
|
For further reading, go here to look up more information about the `mergeProps` and `options` parameters to `connect()`:
|
|
|
|
https://react-redux.js.org/api/connect
|