@truefit/bach-redux

This library brings redux connectivity to components composed with @truefit/bach allowing you to add actions and selectors directly in your enhancer chain, rather than needing an extra HOC for connect.

Installation

npm install @truefit/bach-redux redux react-redux

or

yarn add @truefit/bach-redux redux react-redux

Enhancers

withAction

Allows you to specify a single action creator to be connected to the store. See withActions for more discussion

Enhancer Signature

Parameter	Type	Description
actionName	string	the name for the action creator in the props passed to the wrapped component
fn	js function	the function that is executed when the action creator is invoked
conditions	array of strings	names of the properties on the props object react should restrict the creation of the function to

Example

Typescript

1import React from 'react';
2import {compose} from '@truefit/bach';
3import {withAction} from '@truefit/bach-redux';
4import {PayloadAction} from '@reduxjs/toolkit';
5
6const ADD_TODO = 'ADD_TODO';
7const addToDo = (note: string): PayloadAction<string> => ({
8  type: ADD_TODO,
9  payload: note,
10});
11
12type Props = {
13  addToDo: (note: string) => void;
14};
15
16const WithAction = ({addToDo}: Props) => (
17  <div>
18    <h1>withAction</h1>
19    <button
20      type="button"
21      onClick={() => {
22        addToDo('New ToDo from withAction');
23      }}
24    >
25      Click Me
26    </button>
27  </div>
28);
29
30export default compose(withAction<Props>('addToDo', addToDo))(WithAction);

Javascript

1import React from 'react';
2import {compose} from '@truefit/bach';
3import {withAction} from '@truefit/bach-redux';
4
5const ADD_TODO = 'ADD_TODO';
6const addToDo = note => ({
7  type: ADD_TODO,
8  payload: note,
9});
10
11const WithAction = ({addToDo}) => (
12  <div>
13    <h1>withAction</h1>
14    <button
15      onClick={() => {
16        addToDo('New ToDo from withAction');
17      }}
18    >
19      Click Me
20    </button>
21  </div>
22);
23
24export default compose(
25  withAction('addToDo', addToDo)
26)(WithAction);

withActions

Allows you to specify a map of action creators to be connected to the store.

Side Note This functionality was removed from the react-redux standard hooks (https://react-redux.js.org/next/api/hooks#removed-useactions). That said, we don't agree with the reasoning. Although using dispatch directly in your components does match standard hooks more closely, that doesn't mean that it is better code. In our opinion, it leads to less readable code - thus we have included these enhancers in this library.

Enhancer Signature

Parameter	Type	Description
actions	js object	a js object that contains a map of keys and action creator functions. Each key will be a property passed to the wrapped component.
conditions	array of strings	names of the properties on the props object react should restrict the creation of the functions to

Example

Typescript

1import React from 'react';
2import {compose} from '@truefit/bach';
3import {withActions} from '@truefit/bach-redux';
4import {PayloadAction} from '@reduxjs/toolkit';
5
6const ADD_TODO = 'ADD_TODO';
7
8const addToDo1 = (note: string): PayloadAction<string> => ({
9  type: ADD_TODO,
10  payload: note,
11});
12
13const addToDo2 = (note: string): PayloadAction<string> => ({
14  type: ADD_TODO,
15  payload: `Too: ${note}`,
16});
17
18type Props = {
19  addToDo1: (note: string) => void;
20  addToDo2: (note: string) => void;
21};
22
23const WithActions = ({addToDo1, addToDo2}: Props) => (
24  <div>
25    <h1>withActions</h1>
26    <button
27      type="button"
28      onClick={() => {
29        addToDo1('New ToDo 1 from withActions');
30      }}
31    >
32      Click Me
33    </button>
34    <button
35      type="button"
36      onClick={() => {
37        addToDo2('New ToDo 2 from withActions');
38      }}
39    >
40      Click Me
41    </button>
42  </div>
43);
44
45export default compose(
46  withActions<Props>({addToDo1, addToDo2}),
47)(WithActions);

Javascript

1import React from 'react';
2import {compose} from '@truefit/bach';
3import {withActions} from '@truefit/bach-redux';
4
5const ADD_TODO = 'ADD_TODO';
6
7const addToDo1 = note => ({
8  type: ADD_TODO,
9  payload: note,
10});
11
12const addToDo2 = note => ({
13  type: ADD_TODO,
14  payload: `Too: ${note}`,
15});
16
17const WithActions = ({addToDo1, addToDo2}) => (
18  <div>
19    <h1>withActions</h1>
20    <button
21      onClick={() => {
22        addToDo1('New ToDo 1 from withActions');
23      }}
24    >
25      Click Me
26    </button>
27    <button
28      onClick={() => {
29        addToDo2('New ToDo 2 from withActions');
30      }}
31    >
32      Click Me
33    </button>
34  </div>
35);
36
37export default compose(withActions({addToDo1, addToDo2}))(WithActions);

withDispatch

Returns a reference to the dispatch function from the Redux store. You may use it to dispatch actions as needed.

Enhancer Signature

There are no parameters for this enhancer.

Example

1import React from 'react';
2import {compose} from '@truefit/bach';
3import {withDispatch} from '@truefit/bach-redux';
4import {Dispatch} from 'redux';
5
6const ADD_TODO = 'ADD_TODO';
7
8type Props = {
9  dispatch: Dispatch;
10};
11
12const WithDispatch = ({dispatch}: Props) => (
13  <div>
14    <h1>withDispatch</h1>
15    <button
16      type="button"
17      onClick={() => {
18        dispatch({
19          type: ADD_TODO,
20          payload: 'New ToDo from withDispatch',
21        });
22      }}
23    >
24      Click Me
25    </button>
26  </div>
27);
28
29export default compose(withDispatch())(WithDispatch);

1import React from 'react';
2import {compose} from '@truefit/bach';
3import {withDispatch} from '@truefit/bach-redux';
4
5const ADD_TODO = 'ADD_TODO';
6
7const WithDispatch = ({dispatch}) => (
8  <div>
9    <h1>withDispatch</h1>
10    <button
11      onClick={() => {
12        dispatch({
13          type: ADD_TODO,
14          payload: 'New ToDo from withDispatch',
15        });
16      }}
17    >
18      Click Me
19    </button>
20  </div>
21);
22
23export default compose(withDispatch())(WithDispatch);

React-Redux Hook

useDispatch

withSelector

Allows you to extract data from the Redux store state, using a selector function.

Enhancer Signature

Parameter	Type	Description
selectorName	string	the name of the value in the props passed to the wrapped component
fn	js function	the function that returns the desired value from the store
conditions	array of strings	names of the properties on the props object react should restrict the firing of the function to

Example

Typescript

1import React from 'react';
2import {compose} from '@truefit/bach';
3import {withSelector} from '@truefit/bach-redux';
4import {ApplicationState} from '../../../rootReducer';
5
6const todoSelector = (state: ApplicationState) => state.features.example.test;
7
8type Props = {
9  todos: string[];
10};
11
12const WithSelector = ({todos}: Props) => (
13  <div>
14    <h1>withSelector</h1>
15    <ul>
16      {todos.map(todo => (
17        <li key={todo}>{todo}</li>
18      ))}
19    </ul>
20  </div>
21);
22
23export default compose(
24  withSelector<Props, string[]>('todos', todoSelector)
25)(WithSelector);
26

Javascript

1import React from 'react';
2import {compose} from '@truefit/bach';
3import {withSelector} from '@truefit/bach-redux';
4
5const WithSelector = ({todos}) => (
6  <div>
7    <h1>withSelector</h1>
8    <ul>
9      {todos.map(todo => (
10        <li key={todo}>{todo}</li>
11      ))}
12    </ul>
13  </div>
14);
15
16export default compose(
17  withSelector('todos', (state, props) => state.features.bachRedux.todo),
18)(WithSelector);

React-Redux Hook

useSelector

withStore

Returns a reference to the same Redux store that was passed in to the component. This enhancer should probably not be used frequently. Prefer withSelector() as your primary choice.

Enhancer Signature

There are no parameters for this enhancer.

Example

Typescript

1import React from 'react';
2import {compose} from '@truefit/bach';
3import {withStore} from '@truefit/bach-redux';
4import {Store} from 'redux';
5
6type Props = {
7  store: Store;
8};
9
10const WithStore = ({store}: Props) => (
11  <div>
12    <h1>withStore</h1>
13    <ul>
14      {store.getState().features.example.test.map((todo: string) => (
15        <li key={todo}>{todo}</li>
16      ))}
17    </ul>
18  </div>
19);
20
21export default compose(
22  withStore()
23)(WithStore);

Javascript

1import React from 'react';
2import {compose} from '@truefit/bach';
3import {withStore} from '@truefit/bach-redux';
4
5const WithStore = ({store}) => (
6  <div>
7    <h1>withStore</h1>
8    <ul>
9      {store.getState().features.bachRedux.todo.map(todo => (
10        <li key={todo}>{todo}</li>
11      ))}
12    </ul>
13  </div>
14);
15
16export default compose(
17  withStore(),
18)(WithStore);

React-Redux Hook

useStore