Simple React Hooks of React Redux
You must install some dependent packages before use RHH.
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.
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
.