File tree Expand file tree Collapse file tree 1 file changed +34
-0
lines changed Expand file tree Collapse file tree 1 file changed +34
-0
lines changed Original file line number Diff line number Diff line change @@ -5,3 +5,37 @@ Port for [Redux Dev Tools Extension](https://github.com/zalmoxisus/redux-devtool
5
5
```
6
6
npm install --save-dev-exact context-api-dev-tools-extension
7
7
```
8
+
9
+ ## Example using ` useReducer `
10
+ #### Detailed example can be [ seen here] ( https://github.com/vip-git/context-api-dev-tools-extension/blob/main/example/contexts/TodosContext.tsx )
11
+
12
+ ```
13
+ // Library
14
+ import useContextDevTools from 'context-api-dev-tools-extension';
15
+
16
+ export function TodosContextProvider({
17
+ children
18
+ }: {
19
+ children: React.ReactNode;
20
+ }) {
21
+ // Define reducer
22
+ const [todos, dispatch] = useReducer(todosReducer, initialState);
23
+
24
+ // Initialize DevTools Extension
25
+ const devTools = useContextDevTools(dispatch);
26
+
27
+ // Update devtools to send updated state
28
+ useEffect(() => {
29
+ devTools.sendUpdatedState(todos);
30
+ }, [todos, devTools]);
31
+
32
+ // Mount provider with state context
33
+ return (
34
+ <TodosDispatchContext.Provider value={devTools.sendDispatch}>
35
+ <TodosStateContext.Provider value={todos}>
36
+ {children}
37
+ </TodosStateContext.Provider>
38
+ </TodosDispatchContext.Provider>
39
+ );
40
+ }
41
+ ```
You can’t perform that action at this time.
0 commit comments