// src/state/hook.jsx import React, { createContext, useContext, useReducer, useMemo } from "react"; import { reduce, logger, initialState } from "state"; const LOGGING = 1; export const StateContext = createContext(); export const withCache = reducer => (s, a) => { const newS = reducer(s, a); localStorage.setItem("state", JSON.stringify(newS)); return newS; }; export const StateProvider = ({ children }) => { const [state, dispatch] = useReducer( withCache(LOGGING ? logger : reduce), JSON.parse(localStorage.getItem("state")) || initialState ); const value = useMemo(() => { return { state, dispatch }; }, [state, dispatch]); return ( <StateContext.Provider value={value}>{children}</StateContext.Provider> ); }; export const useState = () => useContext(StateContext);
// src/app.js import { StateProvider } from "state"; ... layout stuff ... const App = () => ( <StateProvider> <Layout /> </StateProvider> ); export default App;
// src/components/my-component.jsx import React from "react"; import { useState } from "state"; const MyComponent = props => { const { state: { thingy }, dispatch } = useState(); return // my jsx }
// src/state/index.js export * from "state/initial-state"; export * from "state/reduce"; export * from "state/logger"; export * from "state/hook";
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Discussion on: Add Offline-Caching to Your React Reducer with 5 Lines of Code
Replies for: Thanks for taking the time to write that ! The main reason I didn't go into it, is to keep the code under 5 lines 😅 I wanted the reader to quic...
For further actions, you may consider blocking this person and/or reporting abuse