RRH

What's this?

Simple React Hooks of React Redux

Dependencies

You must install some dependent packages before use RHH.

• react
• redux

Install

npm

npm install rrh --save

yarn

yarn add rrh

How to use

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>
  )
}

API

useProvider

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.

useSelector

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])

useDispatchToProps

types

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

overview

useDispatchToProps can partialy call mapDispatchToProps to the store state.

useStateToProps

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])

useDispatch

types

() => Dispatch

overview

useDispatch is simply return store.dispatch.

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

useStore

types

() => Store

overview

useStore is simply return store.

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

Muliple store

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

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.

type	description
EACH_MOUNT	Store and Provider will be initialized each componentDidMount
ONCE_PER_FACTORY	Store and Provider will be initialized only first useProvider call.

default hooks

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