You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
fix(README): Improve documentation for Redux usage
Add more documentation on how to create custom wrapper components for usage with Redux. Use the
`fix` prefix to bump patch version to add this + previous changes to npm.
Copy file name to clipboardExpand all lines: README.md
+38Lines changed: 38 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -80,6 +80,44 @@ In this example, if the user is authenticated while they try to access the `logi
80
80
| redirectTo | string | The route to redirect the user to if authenticated |
81
81
| component | React Component | The component that requires authentication |
82
82
83
+
### Usage with Redux
84
+
85
+
The easiest way to use these components with Redux is by creating your own components to wrap the components from this library with Redux's `connect` HOC and passing in `authenticated` as a prop.
86
+
87
+
Example:
88
+
89
+
```jsx
90
+
// ConnectedAuthRoute.js
91
+
import { connect } from'react-redux'
92
+
import { AuthRoute } from'react-router-auth'
93
+
94
+
constmapStateToProps=state=> ({
95
+
// In this example the auth reducer has a key
96
+
// called authenticated which determines if the
97
+
// user is authenticated or not
98
+
authenticated:state.auth.authenticated,
99
+
})
100
+
101
+
exportdefaultconnect(mapStateToProps)(AuthRoute)
102
+
```
103
+
104
+
Now if you want to use this in any of your components, you don't need to pass in the authenticated prop as the component is already hooked up to determine the authenticated state from the Redux store.
0 commit comments