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
55```
66npm install --save-dev-exact context-api-dev-tools-extension
77```
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