diff --git a/apps/desktop/src/routes/reduxExample/+page.svelte b/apps/desktop/src/routes/reduxExample/+page.svelte new file mode 100644 index 000000000..42890baaa --- /dev/null +++ b/apps/desktop/src/routes/reduxExample/+page.svelte @@ -0,0 +1,54 @@ + + +
+ + +

Redux Example

+

Current value: {currentValue}

+ +
+ + +
+
+

+ Is current value greater than ? {greaterThanComparisonTarget} +

+
+ + diff --git a/packages/shared/src/lib/redux/example.ts b/packages/shared/src/lib/redux/example.ts index ee1dc1250..c113e175b 100644 --- a/packages/shared/src/lib/redux/example.ts +++ b/packages/shared/src/lib/redux/example.ts @@ -25,5 +25,9 @@ const exampleSlice = createSlice({ export const { increment, decrement } = exampleSlice.actions; export const exampleReducer = exampleSlice.reducer; -export const selectExample = createSelector(selectSelf, (state) => state.example); -export const selectExampleValue = createSelector(selectExample, (example) => example.value); +export const selectExample = createSelector([selectSelf], (state) => state.example); +export const selectExampleValue = createSelector([selectExample], (example) => example.value); +export const selectExampleValueGreaterThan = createSelector( + [selectExampleValue, (_state: unknown, target: number) => target], + (value, target: number) => value > target +); diff --git a/packages/shared/src/lib/redux/utils.ts b/packages/shared/src/lib/redux/utils.ts index aacfd2360..b10253f2e 100644 --- a/packages/shared/src/lib/redux/utils.ts +++ b/packages/shared/src/lib/redux/utils.ts @@ -1,5 +1,5 @@ import { _store, type AppDispatch, type RootState } from '$lib/redux/store'; -import { derived, readable, type Readable } from 'svelte/store'; +import { readable, type Readable } from 'svelte/store'; /** * Used to access the store directly. It is recommended to access state via @@ -16,18 +16,6 @@ export function useStore(): Readable { return stateStore; } -/** - * Used in combination with slice specific selectors. If an argument of the - * selector depends on a reactive property, IE something defined with - * `$state` or similar runes, then the `useSelector` call should be wrapped in - * a `$derived` block. - */ -export function useSelector(selector: (state: RootState) => T): Readable { - const stateStore = useStore(); - - return derived(stateStore, (state) => selector(state)); -} - /** * Used to access the dispatch function. */