Skip to content

Commit 61178ef

Browse files
authored
Update README.md
1 parent 250bb50 commit 61178ef

File tree

1 file changed

+34
-0
lines changed

1 file changed

+34
-0
lines changed

README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,37 @@ Port for [Redux Dev Tools Extension](https://github.com/zalmoxisus/redux-devtool
55
```
66
npm 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+
```

0 commit comments

Comments
 (0)