React-Redux Methods

A lightweight react-redux toolkit for writing strong-typed, minimal code redux boilerplate.

Installation

npm install react-redux-methods

How to use?

Creating Redux Contexts (reducer, actions, selectors)

1import { createReduxMethods, ComposePayload } from 'react-redux-methods';
2
3interface INotification {
4  isOpen: boolean;
5  message: string;
6}
7
8const initialState: INotification = {
9  isOpen: false,
10  message: '',
11};
12
13const [notificationsReducer, notificationsActions, notificationsSelectors] = createReduxMethods({
14  initialState,
15  reducers: {
16    setNotificationShow: (state, action) => ({
17      ...state,
18      isOpen: true,
19      message: action.payload,
20    }),
21    setNotificationHide: () => initialState,
22    // You can define your own type for payload using 'ComposePayload' generics. In this case, we use 'string' type
23    // for a 'message' property. This provides typescript intellisense for your payload when dispatching an action.
24    updateNotification: (s, a: ComposePayload<string>) => ({
25      ...s,
26      message: a.payload,
27    }),
28  },
29  selectionNode: 'globals.notifications', // <--- in this case, 'notifications' is located in 'globals' node of the
30  // redux state tree. 'selectionNode' parameter should always be defined when 'selectors' parameter is defined.
31  selectors: {
32    getNotification: (s) => s,
33    getNotificationMessage: (s) => s.message, // < -- under the hood, the actual output of your selector is
34    // '(state) => state.globals.notifications.message' but you only provide a shorthand version with typescript
35    // intellisense.
36
37    // Please take note that you can apply 'reselect' api here since it is one of the dependencies of this package
38    // (see 'reselect' documentation).
39  },
40});
41
42// export all
43export { notificationsReducer, notificationsActions, notificationsSelectors };

You would then combine your reducers, actions, and selectors.

1import { combineReducers } from 'redux';
2
3import { notificationsReducer, notificationsActions, notificationsSelectors } from './notifications';
4
5// combine reducers
6const globalReducer = combineReducers({
7  notifications: notificationsReducer,
8  // ...other reducers
9});
10
11// combine actions
12const actions = {
13  ...notificationsActions,
14  // ...other actions
15};
16
17// combine actions
18const selectors = {
19  ...notificationsSelectors,
20  // ...other selectors
21};

Consuming redux contexts (for your react component)

Instead of using these common 'connect' or 'useSelector'/'useDispatch' methods from 'redux'/'react-redux', you can connect redux to your component using our helper functions. So that it would utilize typescript intellisense and all of your 'actions' and 'selectors' would easily be accessed by your component.

You must first define your redux connector ONCE only. Then you can consume it by all of your react components that utilize redux state.

In this case we will place our connector functions in the 'connections.ts' file.

1import { createConnector, createDispatch, createGroupDispatch, createStateSelector } from 'react-redux-methods';
2
3import store from './store';
4import selectors from './selectors';
5import actions from './actions';
6
7export const reduxConnector = createConnector(selectors, actions);
8export const dispatchAction = createDispatch(store.dispatch, actions);
9export const makeGroupDispatch = createGroupDispatch(actions);
10export const getValue = createStateSelector(store.getState(), selectors);

You would then consume the created connections to your component.

1import type { ConnectedProps } from 'react-redux';
2import { reduxConnector } from './connections';
3
4// 'reduxConnector' function provides typescript intellisense for react-redux's 'connect' api.
5// This means that all of your pre-defined 'selectors' and 'actions' will be provided by typescript
6// to your component.
7const connector = reduxConnector(
8  (selectors) => ({ notification: selectors.getNotification }),
9  (actions) => ({ setNotificationShow: actions.setNotificationShow }),
10);
11
12type Props = ConnectedProps<typeof connector>;
13
14const App = ({
15  notification, // <-- type inference is 'INotification' as defined above.
16  setNotificationShow, // <-- type inference is '(payload: string) => INotification'
17}: Props) => {
18  return (
19    <div>
20      <p>`Notification: ${notification.message}`</p>
21      <button onClick={() => setNotificationShow('Hello World!')}>Show Notification</button>;
22    </div>
23  );
24};
25
26export default connector(App);

You can also dispatch an action or get a state outside of your react component.

1import { dispatchAction, getValue } from './connections';
2
3const toastNotificationShow = (message) => {
4  // ....your code logic
5
6  // all of the parameters are also powered by typescript
7  // the first parameter is the 'action' to dispatch and the other is the 'payload'
8  dispatchAction('setNotificationShow', message);
9};
10
11const getNotification = () => {
12  // ...your code logic
13
14  // the parameter is the 'selector' name which is also powered by typescript.
15  return getValue('getNotification');
16};