RRH

What's this?

Simple https://reactjs.org/docs/hooks-overview.html' of https://github.com/reduxjs/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, if useProvider called.
So if you want to create new store and Provider, you need to create new hooks instance. See below.
 
 
### useSelector
 
__types__
 
```typescript
<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.

default hooks

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