Simple way to hook components into Redux, without the overhead of react-redux's higher order function connect
.
Note: This package is currently not published under NPM as a package by the same name already exists which does pretty much the same thing. :)
Begin by wrapping your component tree as with react-redux
.
import { Provider } from 'react-redux-hooks'
import myStore from '../myStore'
function App() {
return (
<Provider store={myStore}>
<App />
</Provider>
)
}
And then consume it out of context. API usage identical to that of React's useReducer
hook, but instead leverages an entire store. Include an initial getter to react to a particular piece of state, rather than re-rendering any time the entire redux store changes.
import { useRedux } from 'react-redux-hooks'
function Counter({ initialCount }) {
const [count, dispatch] = useRedux(state => state.count)
return (
<>
Count: {count}
<button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</>
)
}
You can also return larger sets of data from state, just like mapStateToProps:
function MessageWithUser({ userId }) {
const [{ message, user }, dispatch] = useRedux(state => {
return {
message: state.messages.filter(msg => msg.sender === userId),
user: state.users.byId[userId],
}
})
return (
<>
From: {user.firstName}:
<textarea>{message.text}</textarea>
</>
)
}