Skip to content
Alternative Redux bindings with upcoming React hooks
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src remove cra bootstrap Oct 26, 2018
.babelrc add build step Oct 26, 2018
.gitignore ignore dist Oct 26, 2018
LICENSE Create LICENSE Oct 27, 2018
README.md Update README.md Oct 29, 2018
package.json add keywords Oct 28, 2018
rollup.config.js bundle helpers together Oct 26, 2018
yarn.lock bundle helpers together Oct 26, 2018

README.md

react-use-redux

Alternative Redux bindings with upcoming React hooks.

Note: this is an experimental package and hooks are still a proposal/alpha. I do not recommend using this in production. You're probably better off using react-redux for now.

Follow discussion of using hooks in react-redux repo here

Installing

npm install react-use-redux

or

yarn add react-use-redux

Examples

Usage is very similar to what react-redux provides, except it uses hooks.

Firstly let's wrap our app with provider from react-use-redux:

import { StoreContext } from 'react-use-redux';

const store = configureStore(/* ... */)

const AppWithStore = () => (
  <StoreContext.Provider value={store}>
    <App />
  </StoreContext.Provider>
)

Now that we have that taken care of we can connect our functional components to Redux store:

import { createUseConnect } from 'react-use-redux'

const useConnect = createUseConnect((state) => ({ user: state.user }))

const Profile = () => {
  const { user } = useConnect()

  return (
    <div>
      <div>Name: {user.name}</div>
      <div>Surname: {user.surname}</div>
    </div>
  )
}

And that's it! Now we can use redux state in our components without hocs or render props.

API

StoreContext

React context which has two properties: Provider and Consumer. Value provided to <StoreContext.Provider /> should be an instance of Redux store. Use this as a top level wrapper of your app.

createUseConnect([mapStateToProps], [mapDispatchToProps], [mergeProps])

Hook creator which returns useConnect hook to be used inside a component. Behaviour is almost identical to connect from react-redux. useConnect returns an object of props.

mapStateToProps((state, ownProps) => object)

Called everytime when store is updated. Used to calculate props from current state.

mapDispatchToProps((dispatch, ownProps) => object)

Used to wrap dispatch over provided functions. If mapDispatchToProps is not provided, it will fallback to returning dispatch to props.

mergeProps((stateProps, dispatchProps, ownProps) => object)

Used to tweak how props should be merged, this is an advanced property. When this function is not provided left-to-right merge is applied:

(stateProps, dispatchProps, ownProps) => ({ ...stateProps, ...dispatchProps, ...ownProps })

License

MIT

You can’t perform that action at this time.