@stenajs-webui/redux

stenajs-webui/redux

This package contains utilities that can help creating Redux features.

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
>(state => state.timeTableFilter, "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

0.0.34

• Add first version of @stenajs-webui/redux.
• Add commit-reducer feature for Redux.
• Add Drawer component.
• Add useArraySet hook.
• Update design of Spinner.
• Add InputSpinner which is used in buttons and input fields.
• Merge the two individual theme prop for calendar and text input into one common theme prop for DateTextInput.
• Add fontWeight to ButtonTheme.
• Remove letter spacing in buttons.