Simple React Hooks of React Redux

You must install some dependent packages before use RHH.

• react
• redux

npm

npm install rrh --save

yarn

yarn add rrh

Provider

import React from 'react';
import { useProvider } from 'rrh';
import reducer from './reducer';
import middleware from './middleware'
import Child from './child';

const Component = () => {
  const Provider = useProvider(() => ({
    reducer,
    preloadedState: {count: 1},
    storeEnhancer: applyMiddleware(middleware)
  }));

  return <Provider><Child></Provider>
}

connect

import React from 'react';
import { useSelector } from 'rrh';

const Child = (props) => {
  const selected = useSelector(
    props,
    (dispatch, props) => ({
      increment: () => dispatch({type: 'INCREMENT', payload: 1}),
      decrement: () => dispatch({type: 'DECREMENT', payload: -1}),
    }),
    (state, props) => ({count: state.count}),
    state => [state.count]
  );

  return (
    <div>
      {selected.count}
      <button onClick={selected.increment}>INC</button>
      <button onClick={selected.decrement}>DEC</button>
    </div>
  )
}

types

<State, Ext = {}, StateExt = {}>(init: () => {
  reducer: Reducer<State, AnyAction>;
  preloadedState?: DeepPartial<State>;
  storeEnhancer?: StoreEnhancer<Ext, StateExt>;
}) => Provider

overview

Return redux store Provider Component that has store inside.
No props needed. All arguments are same as redux's createStore.

Store and provider is initialized once per process when useProvider called. So if you want to create new store and Provider, you need to create new hooks instance. See Multiple store.

types

<Handlers, ExtractedState, Props, State>(
  props: React.PropsWithChildren<Props>,
  mapDispatchToProps: (dispatch: Dispatch, ownProps: Props) => Handlers,
  mapStateToProps: (state: State, ownProps: Props) => ExtractedState,
  deps?: any[] | ((state: State) => any[])
) => Handlers & ExtractedState

overview

useSelector behave like redux's connect(config)(Component), but like https://github.com/reduxjs/reselect,
we will check dependencies are updated or not, by using useMemo. So if deps is updated, mapDispatchToProps and mapStateToProps will be called.

If you want to specify deps from state, do like below.

useSelector(props, () => {...}, () => {...}, (state) => [state.valueA, state.valueB, ...])

or if you want to use array deps just like other hooks.

useSelector(props, () => {...}, () => {...}, [props.valueA, props.valueB])

types

<Props, Handlers>(
  props: Props,
  mapDispatchToProps: (dispatch: Dispatch, ownProps: Props) => Handlers,
  deps?: any[]
) => Handlers

overview

useDispatchToProps can partialy call mapDispatchToProps to the store state.

types

<Props, State, ExtractedState>(
  props: Props,
  mapStateToProps: (state: State, ownProps: Props) => ExtractedState,
  deps?: any[] | ((state: State) => any[])
) => ExtractedState

overview

useStateToProps can partialy call mapStateToProps to the store state.

If you want to specify deps from state, do like below.

useStateToProps(props, () => {...}, (state) => [state.valueA, state.valueB, ...])

or if you want to use array deps just like other hooks.

useStateToProps(props, () => {...}, [props.valueA, props.valueB])

types

() => Dispatch

overview

useDispatch is simply return store.dispatch.

const dispatch = useDispatch()
dispatch({type: 'ACTION', ...});

types

() => Store

overview

useStore is simply return store.

const store = useStore()
console.log(store.getState());

If you want to create muliple store, you need to create new hooks instance by using generateReduxHooks.

types

enum RRHStoreInitilizationTiming {
  EACH_MOUNT,
  ONCE_PER_FACTORY
}

interface Options {
  initializationTiming: RRHStoreInitilizationTiming
}

(options: Options) => Hooks

overview

generateReduxHooks is create new hooks instance.

All hooks returned from generateReduxHooks is not initialized, so if you call useProvider,
new store and Provider will be created. Between hooks instances, store is not shared.

initialization timing

generateReduxHooks accepts RRHStoreInitilizationTiming, this options behave like below.

default hooks

All default hooks that exported from 'rrh' package are initialized by RRHStoreInitilizationTiming.ONCE_PER_FACTORY.