Added example page for redux

apps/desktop/src/routes/reduxExample/+page.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import {
+		decrement,
+		increment,
+		selectExampleValue,
+		selectExampleValueGreaterThan
+	} from '@gitbutler/shared/redux/example';
+	import { useDispatch, useStore } from '@gitbutler/shared/redux/utils';
+	import Button from '@gitbutler/ui/Button.svelte';
+	import { goto } from '$app/navigation';
+
+	/**
+	 * A demo page for Redux. This can be accessed by typing
+	 * `location = '/reduxExample'` in the console.
+	 */
+
+	const store = useStore();
+	const dispatch = useDispatch();
+
+	let comparisonTarget = $state(4);
+
+	const currentValue = $derived(selectExampleValue($store));
+	const greaterThanComparisonTarget = $derived(
+		selectExampleValueGreaterThan($store, comparisonTarget)
+	);
+</script>
+
+<div class="example-container">
+	<Button onclick={() => goto('/')} type="button">Go back</Button>
+
+	<h1>Redux Example</h1>
+	<p>Current value: {currentValue}</p>
+
+	<div>
+		<Button onclick={() => dispatch(increment())} type="button">increase</Button>
+		<Button onclick={() => dispatch(decrement())} type="button">decrease</Button>
+	</div>
+	<hr />
+	<p>
+		Is current value greater than <input type="number" bind:value={comparisonTarget} />? {greaterThanComparisonTarget}
+	</p>
+</div>
+
+<style lang="postcss">
+	.example-container {
+		margin: auto;
+
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		gap: 8px;
+	}
+</style>

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
+);

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<RootState> {
 	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<T>(selector: (state: RootState) => T): Readable<T> {
-	const stateStore = useStore();
-
-	return derived(stateStore, (state) => selector(state));
-}
-
 /**
  * Used to access the dispatch function.
  */