redux-hooks-next v0.1.5

Redux Hooks Next

Usage

yarn add redux react-redux

yarn add redux-hooks-next

import { useSelector, useActions, ... } from 'redux-hooks-next'

react-redux

Re-exported useDispatch, useStore from react-redux

useActions(...args)

const mapDispatch = {
    action,
    ...
}

// or

const mapDispatch = [
    action,
    ...
]

function MyScreen() {
  const { action } = useActions(mapDispatch);
  // or
  const [action] = useActions(mapDispatch);
  return <button onClick={action}>click</button>;
}

useSelector(...args)

Here using function shallowEqual for to check if the object inside the selector are still the same. https://redux.js.org/tutorials/fundamentals/part-5-ui-react#selecting-data-in-list-items-by-id

const mapState = (state) => ({
    loading: state.loading,
    ...
});

function MyScreen() {
  const { loading } = useSelector(mapState);
  if (loading) {
    return <p>MyScreen is loading</p>;    
  }
  return <p>MyScreen render</p>;
}