react_smart_context_hooks_counter_state_with_actions.ts

1import React from 'react';
2import { createSmartContext } from 'smart-context-hooks';
3
4// 1. Define the State type
5interface CounterState {
6  count: number;
7}
8
9// 2. Define the Actions type
10interface CounterActions {
11  increment: () => void;
12  decrement: () => void;
13}
14
15// 3. Create the context
16const {
17  Provider: CounterProvider,
18  useContext: useCounter,
19  useActions: useCounterActions,
20} = createSmartContext<CounterState, CounterActions>(
21  // Initial State
22  { count: 0 },
23  // Actions implementation
24  (setState) => ({
25    increment: () => setState((prev) => ({ ...prev, count: prev.count + 1 })),
26    decrement: () => setState((prev) => ({ ...prev, count: prev.count - 1 })),
27  })
28);
29
30// 4. Usage in Components
31const CounterDisplay = () => {
32  const { count } = useCounter();
33  return <div>Count: {count}</div>;
34};
35
36const CounterControls = () => {
37  const { increment, decrement } = useCounterActions();
38  return (
39    <>
40      <button onClick={increment}>+</button>
41      <button onClick={decrement}>-</button>
42    </>
43  );
44};
45
46const App = () => (
47  <CounterProvider>
48    <CounterDisplay />
49    <CounterControls />
50  </CounterProvider>
51);
52
53export default App;