Proposal: useReduxHooks

[DScheglov]

Hi, guys. I tried to implement react-redux-hooks for my project.
I don't want to offer whole implementation, but I guess approaches could be interesting.

1. useReduxHooks

function SomeConnectedComponent() {
  const { useAction, useSelector } = useReduxHooks();
  // ... some rendering code
}

The main idea of useReduxHooks to aggregate context, store.subscription and update triggering inside one hook that allows to use useAction and useSelector multiple times inside component without performance suffering.

2. useAction

function SomeConnectedComponent() {
  const { useAction } = useReduxHooks();
  const makeMeHappy = useAction(
    ({ target }) => happyMaker(target.value),
    [], // useCallback-like dependencies
  );
  // ... some rendering code
}

The main idea of useAction is to combine useCallback and compose(dispatch, action), with some event-processing logic.

3. useSelector

function SomeConnectedComponent({ userId, contractId }) {
  const { useSelector } = useReduxHooks();
  const user = useSelector(getUser, userId);
  const contact = useSelector(
     getUserContract,
     userId, contractId // should be used ad useMemo-like dependencies
   );
  // ... some rendering code
}

The idea is to declare dependencies and do not use state-point. Also I propose to use Object.is to detect state changes. It will motivate developers to use memorized selectors to not loose performance.

Maybe useSelector could have state-point interface:

const user = userSelector(
  state => getUser(state, userId),
  [userId]
);

4. useReduxStore - simple wrapper under useContext to provide components with store.

5. useReduxAction and useReduxSelector are stand-alone versions of useAction and useSelector (could be imported from react-redux directly) and could be used when React component doesn't require optimization:

import { useReduxAction } from 'react-redux';

function SomeComponent({ children }) {
  const makeMeHappy = useReduxAction( // redux-hook is used one time per component
    ({ target }) => happyMaker(target.checked ? 'very much' : 'just happy'),
    []
  );
  return (
     <label for="my-happy-checkbox'>
       <input type="checkbox" onChange={makeMeHappy} id="my-happy-checkbox" />
       {children}
     </label>
  );
};

[timdorr]

I suggest reading through #1252. All of these suggestions have been addressed and discussed in detail there in some form.

[DScheglov]

@timdorr useReduxHooks or other similar approach was not discussed, am I wrong?

[timdorr]

We discussed that in the linked issue. The correct, idiomatic way to use Hooks is to provide them as piecemeal, composable functions, not as one big "mega-function". If you want to consolidate those things together, you should just use connect.

[DScheglov]

We discussed that in the linked issue.

I've not found (but I can skip I was not in touch with process all that time ...).

The correct, idiomatic way to use Hooks is to provide them as piecemeal, composable functions, not as one big "mega-function"

Well, it's clear.
The proposed optimization of useSelector doesn't effect to significant performance enhancement.

So, thanks for dialog and sorry for disturb.