Port for Redux Dev Tools Extension now using Context API
npm install --save-dev-exact context-api-dev-tools-extension
Detailed example can be seen here
// Library
import useContextDevTools from 'context-api-dev-tools-extension';
export function TodosContextProvider({
children
}: {
children: React.ReactNode;
}) {
// Define reducer
const [todos, dispatch] = useReducer(todosReducer, initialState);
// Initialize DevTools Extension
const devTools = useContextDevTools(dispatch);
// Update devtools to send updated state
useEffect(() => {
devTools.sendUpdatedState(todos);
}, [todos, devTools]);
// Mount provider with state context
return (
<TodosDispatchContext.Provider value={devTools.sendDispatch}>
<TodosStateContext.Provider value={todos}>
{children}
</TodosStateContext.Provider>
</TodosDispatchContext.Provider>
);
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent