Skip to content
Super Simple React Hooks for react-redux.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
scripts
src
.gitignore
.npmignore
README.md
index.js
package.json
tsconfig.json
yarn.lock

README.md

RRH

What's this?

Simple React Hooks of React Redux

Dependencies

You must install some dependent packages before use RHH.

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.

You can’t perform that action at this time.