rrh v1.0.1
RRH
What's this?
Simple https://reactjs.org/docs/hooks-overview.html'(React Hooks) of https://github.com/reduxjs/react-redux(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.
type | description |
---|---|
EACH_MOUNT | Store and Provider will be initialized each componentDidMunt |
ONCE_PER_FACTORY | Store and Provider will be initialized only first useProvider call. |
default hooks
All default hooks that expored from 'rrh' package are initialized by RRHStoreInitilizationTiming.ONCE_PER_FACTORY
.