mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 15:18:01 +00:00
Add Dispatch Anywhere With Redux as a react til
This commit is contained in:
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
|
|||||||
For a steady stream of TILs from a variety of rocketeers, checkout
|
For a steady stream of TILs from a variety of rocketeers, checkout
|
||||||
[til.hashrocket.com](https://til.hashrocket.com/).
|
[til.hashrocket.com](https://til.hashrocket.com/).
|
||||||
|
|
||||||
_598 TILs and counting..._
|
_599 TILs and counting..._
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -421,6 +421,7 @@ _598 TILs and counting..._
|
|||||||
### React
|
### React
|
||||||
|
|
||||||
- [Accessing Env Vars In create-react-app](react/accessing-env-vars-in-create-react-app.md)
|
- [Accessing Env Vars In create-react-app](react/accessing-env-vars-in-create-react-app.md)
|
||||||
|
- [Dispatch Anywhere With Redux](react/dispatch-anywhere-with-redux.md)
|
||||||
- [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
|
- [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
|
||||||
- [Inactive And Active Component Styles With Radium](react/inactive-and-active-component-styles-with-radium.md)
|
- [Inactive And Active Component Styles With Radium](react/inactive-and-active-component-styles-with-radium.md)
|
||||||
- [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md)
|
- [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md)
|
||||||
|
|||||||
33
react/dispatch-anywhere-with-redux.md
Normal file
33
react/dispatch-anywhere-with-redux.md
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
# Dispatch Anywhere With Redux
|
||||||
|
|
||||||
|
Your React app is going to have a single top-level `store` which is
|
||||||
|
connected to the app with the `Provider` component. Most of the time, when
|
||||||
|
you create a connected component, you'll create prop functions that dispatch
|
||||||
|
on a redux action.
|
||||||
|
|
||||||
|
This isn't the only place you can dispatch though.
|
||||||
|
|
||||||
|
If you export your `store`, then it can be imported anywhere along with its
|
||||||
|
`dispatch` function.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// src/index.js
|
||||||
|
export const store = createStore(rootReducer);
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// src/components/MyComponent.js
|
||||||
|
import { store } from '../index';
|
||||||
|
import { updateData } from '../actions';
|
||||||
|
|
||||||
|
// ...
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
getData().then((json) => {
|
||||||
|
store.dispatch(updateData(json));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
See the [`dispatch`](https://redux.js.org/docs/api/Store.html#dispatch)
|
||||||
|
documentation for more details.
|
||||||
Reference in New Issue
Block a user