@stenajs-webui/redux

stenajs-webui/redux

This package contains utilities that can help create Redux features.

Higher order reducers

reducerIdGate

Creates a reducer that requires action.reducerId to match specified reducerId.

recordObjectReducer

Creates a reducer that applies the inner reducer to a state[action.recordId] instead of directly to state.

Reducer factories

commit-reducer

This reducer keeps a workspace state and a committed state. Changes can be made to workspace, which can then be committed.

entity-by-id-reducer

This reducer stores entities by id. Entities can be added, removed and updated.

entity-reducer

This reducer stores a single entity. It can be replaced and partially updated.

entity-list-reducer

This reducer stores a list and provides actions for manipulating the items in the list.

entity-crud-status-reducer

This reducer uses entity-by-id-reducer to store information about current CRUD operation state. It contains flags such as loading, error, etc.

modified-field-reducer

This reducer uses entity-by-id-reducer to store information about a change made to something. For example, if a user enters data into fields in a form, you can keep track of the changes made by the users to batch all updates.

selected-ids-reducer

This reducer contains a list of ids that can be toggled on or off. This can be used when having a list of checkboxes that can be toggled on or off.

sort-order-by-id-reducer

This reducer keeps track of a sort order where the order is determined by a list of ids. This is useful when different lists sort the same entity, but does not have access to the same fields.

sort-order-reducer

This reducer keeps track of sort order by key, such as column name.

Usage

Here is an example.

commit-reducer

This makes it easy to have a state split into workspace and committed state.

This can be useful when editing a form, which uses workspace state. When user presses enter, it is committed.

A search query is built from committed state, and thus, the search is triggered when the commit occurs, instead of on every keystroke.

Reducer

export const timeTableFilterReducer =
  createCommitReducer<TimeTableFilterState>("timeTableFilter",
  {
    workspace: INITIAL_STATE,
    committed: INITIAL_STATE
  });

• First argument is the id of the reducer. (You can have multiple)
• Second argument is initial state, which must be { workspace: X, committed: Y }.
• X can be the same as Y, but it is not required.

Actions

export const { setValues, commitValues, clearValues } =
  createCommitReducerActions<TimeTableFilterState>("timeTableFilter");

// In component
const dispatch = useDispatch();
dispatch(setValues({ email: "[e-mail]" }));

• The first argument is the id of the reducer.

Selectors

export const { getWorkspaceValues, getCommittedValues } = createCommitReducerSelectors<
  StoreState,
  TimeTableFilterState
>("timeTableFilter", state => state.timeTableFilter);

// In component
const filterValues = useSelector(getWorkspaceValues);

• First argument is the id of the reducer.
• Second argument is a selector which selects the reducers state from global store state.

Changelog

3.0.0

Design fixes

• Popover now uses box-shadow from default-theme.css instead of tippy.js default.

New components

Tag

Derived from Chip, but with border and no interactions.

Text

A new component Text with different variants. The variation implements all the different typography in LHDS.

Main props are variant and size.

Variants have predefined styles including color, but color can be overridden with prop color.

See stories for examples.

Heading

Same as Text, but for headings.

Variants are h1 through h6.

Other components

All components that use old text components have been updated to use new components.

Stories

All stories have been updated to use new components.

Deprecations

The following components are still available, but are deprecated and will be removed in a future release.

• HeaderText
• LargeText
• StandardText
• SmallText
• SmallerText

HeaderText now uses Heading. The rest uses Text. This means that many props are no longer available.

Breaking changes

HeaderText

HeaderText no longer supports hoverUnderline, hoverColor, textDecoration and fontWeight.

Text components

• No longer supports hoverColor, textDecoration, hoverUnderline, fontWeight.
• No longer supports italic, use <Text variant={"caption"}> instead.

TinyText

TinyText has been removed. Use Text with variant smaller instead.

Chip

Chip now only has two variants, primary and secondary.