Skip to content

Commit

Permalink
fix(README): Improve documentation for Redux usage
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
joelseq committed Mar 30, 2018
1 parent 72cae4f commit ff1cb2a
Showing 1 changed file with 38 additions and 0 deletions.
38 changes: 38 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,44 @@ In this example, if the user is authenticated while they try to access the `logi
| redirectTo | string | The route to redirect the user to if authenticated |
| component | React Component | The component that requires authentication |

### Usage with Redux

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.

Example:

```jsx
// ConnectedAuthRoute.js
import { connect } from 'react-redux'
import { AuthRoute } from 'react-router-auth'

const mapStateToProps = state => ({
// In this example the auth reducer has a key
// called authenticated which determines if the
// user is authenticated or not
authenticated: state.auth.authenticated,
})

export default connect(mapStateToProps)(AuthRoute)
```

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.

```jsx
import React, { Component } from 'react'
import UserProfile from './UserProfile'
// Import our connected AuthRoute component
import ConnectedAuthRoute from './ConnectedAuthRoute'

class Example extends Component {
render () {
return (
{/* we don't need to pass in the authenticated prop anymore */}
<ConnectedAuthRoute path="/profile" component={UserProfile} redirectTo="/login" />
)
}
}
```

## License

Expand Down

0 comments on commit ff1cb2a

Please sign in to comment.