Skip to content

Commit ff1cb2a

Browse files
committed
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.
1 parent 72cae4f commit ff1cb2a

File tree

1 file changed

+38
-0
lines changed

1 file changed

+38
-0
lines changed

README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,44 @@ In this example, if the user is authenticated while they try to access the `logi
8080
| redirectTo | string | The route to redirect the user to if authenticated |
8181
| component | React Component | The component that requires authentication |
8282

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+
const mapStateToProps = 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+
export default connect(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.
105+
106+
```jsx
107+
import React, { Component } from 'react'
108+
import UserProfile from './UserProfile'
109+
// Import our connected AuthRoute component
110+
import ConnectedAuthRoute from './ConnectedAuthRoute'
111+
112+
class Example extends Component {
113+
render () {
114+
return (
115+
{/* we don't need to pass in the authenticated prop anymore */}
116+
<ConnectedAuthRoute path="/profile" component={UserProfile} redirectTo="/login" />
117+
)
118+
}
119+
}
120+
```
83121

84122
## License
85123

0 commit comments

Comments
 (0)