@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

2.0.0

New features

DateRangeDualTextInput

New component DateRangeDualTextInput which has the same functionality as DateRangeInput.

It does not replace it though, since they are not API compatible.

CenterModal

New modal which is centered and not draggable.

LoadingModal

New modal for showing loading/saving state.

Improvements

• Add revertEditableEntity action to editable-entity-reducer.
• All calendars now has a panel for quickly selecting month and year.

Design changes

• Disabled ActionMenuItem now has white background.

Breaking changes

• Months enum have been renamed to Month.
• WeekDays enum have been renamed to WeekDay.

Popover

Popover now uses Tippy, and Tippy's props. This means that some props have changed.

Most importantly, content and children can no longer be functions. If you need the hide and show functions, implement them using local state and the Popover visible props.