mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
89 lines
3.5 KiB
Markdown
89 lines
3.5 KiB
Markdown
# Step 2.7: Connect Redux store to view (Demo)
|
|
|
|
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
|
|
|
|
Redux is currently the most popular Flux implementation, and the ecosystem of related libraries has grown as a result. This is one of the reasons why it is a very popular library within Microsoft products.
|
|
|
|
Various GitHub users have collected "awesome lists" of tech and articles related to Redux. Here is [one such list](https://github.com/xgrommx/awesome-redux#react---a-javascript-library-for-building-user-interfaces), but 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`](https://react-redux.js.org/).
|
|
|
|
## The official React Redux binding: `react-redux`
|
|
|
|
That's right, Redux doesn't just work with React. It can also be used with Vue.js, Angular, and React Native, to name a few.
|
|
|
|
### `<Provider>` component
|
|
|
|
The store doesn't magically get passed to the views. It has to be supplied by a `react-redux` component called [`<Provider>`](https://react-redux.js.org/api/provider). A `<Provider>` can be placed anywhere, but it's best to just make it available at the root the app:
|
|
|
|
```js
|
|
const store = createStore(reducers);
|
|
|
|
const App = () => {
|
|
return (
|
|
<Provider store={store}>
|
|
<div>Hello World!</div>
|
|
</Provider>
|
|
);
|
|
};
|
|
```
|
|
|
|
### `connect()` higher-order function
|
|
|
|
`react-redux` provides a [`connect()`](https://react-redux.js.org/api/connect) function that turns the Redux store and dispatch functions into props for React components. The state and action dispatchers are passed along with a `<Provider>` component.
|
|
|
|
```js
|
|
const OldComponent = props => {
|
|
return <div>{props.foo}</div>;
|
|
};
|
|
|
|
const NewComponent = connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps,
|
|
mergeProps,
|
|
options
|
|
)(OldComponent);
|
|
```
|
|
|
|
`connect()` takes in a few functions that map portions of the state tree and dispatcher functions into props. It is a **higher-order function**, meaning that the return value of `connect()` is a function that decorates `OldComponent` into a `NewComponent` with all the mapped props.
|
|
|
|
Next we'll learn about how to write `mapStateToProps` and `mapDispatchToProps`. For demonstration purposes, we'll assume the store and the component props look like this:
|
|
|
|
```ts
|
|
interface Store {
|
|
foo: string;
|
|
// and probably some other properties
|
|
}
|
|
|
|
interface ComponentProps {
|
|
foo: string;
|
|
addTodo: (label: string) => void;
|
|
}
|
|
```
|
|
|
|
#### `mapStateToProps`
|
|
|
|
A [`mapStateToProps`](https://react-redux.js.org/api/connect#mapstatetoprops-state-ownprops-object) function uses the state tree as a parameter and selects portions of it that will be passed to the component as part of `props`. When values in the state tree change, the `mapStateToProps` function is called, and the new props are passed to the component (causing React to re-render it).
|
|
|
|
```ts
|
|
function mapStateToProps(state: Store): Partial<ComponentProps> {
|
|
return {
|
|
foo: state.foo
|
|
};
|
|
}
|
|
```
|
|
|
|
#### `mapDispatchToProps`
|
|
|
|
A [`mapDispatchToProps`](https://react-redux.js.org/api/connect#mapdispatchtoprops-object-dispatch-ownprops-object) function generates props which are used to dispatch Redux actions. This function generally returns props which the component will use as callbacks in response to user actions.
|
|
|
|
```ts
|
|
function mapDispatchToProps(dispatch: any): Partial<ComponentProps> {
|
|
return {
|
|
// the dispatched message COULD be generated by an
|
|
// action creator instead (see later steps)
|
|
addTodo: (label: string) => dispatch({ type: 'addTodo', label })
|
|
}
|
|
}
|
|
```
|