{"_id":"@designbycosmic/cosmic-react-state-management","_rev":"2-7b4cc44586e0bdbb10a05f198771c2c4","name":"@designbycosmic/cosmic-react-state-management","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.2":{"name":"@designbycosmic/cosmic-react-state-management","version":"0.0.2","main":"dist/index.js","source":"src/index.js","description":"State management using React context and useReducer","author":{"name":"@designbycosmic"},"repository":{"type":"git","url":"git+ssh://git@github.com/designbycosmic/cosmic-react-state-management.git"},"license":"UNLICENSED","scripts":{"prepublishOnly":"babel ./src --out-dir ./dist -s inline"},"peerDependencies":{"react":">= 16.8.0","react-dom":"^16.8.3"},"devDependencies":{"@babel/cli":"^7.5.5","@babel/core":"^7.5.5","@babel/preset-env":"^7.5.5","@babel/preset-react":"^7.0.0"},"gitHead":"b038199e86007f287512a95e4a55f1b7e0c1feba","bugs":{"url":"https://github.com/designbycosmic/cosmic-react-state-management/issues"},"homepage":"https://github.com/designbycosmic/cosmic-react-state-management#readme","_id":"@designbycosmic/cosmic-react-state-management@0.0.2","_nodeVersion":"12.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-iqRF7BRAsbbfu1iUewISb8CyyQBb5tGI0JfyS8D+BeS7kGzfMA1DRoGssa18tU9/svyffN5MSphWKF5u28ir8A==","shasum":"23de30091de4c2b75cb894947d4c73b28863eed3","tarball":"https://registry.npmjs.org/@designbycosmic/cosmic-react-state-management/-/cosmic-react-state-management-0.0.2.tgz","fileCount":7,"unpackedSize":19723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZE92CRA9TVsSAnZWagAAn/gP/j4WxfFSczgkrJC3OdtY\ng/M/jluIWdRf1cPeIKQWxKyQYaMK/3SeE/q7qdIxrBc88CzmQ/aHwM6wolCA\ndo8Drd7DnBG5+7F1z4MHISr0oDNCMq/QZGKtYUQgDE58nCabwx12Uuh98jXx\n209CLrY/rKVXGl0XPbU/6moMpfPfwXqJfgqvV0ONSlyKAGtvZIxu2+nmlTNb\nfwHTvg/E28Tz6Sab58DBCXQG/XcWGNRgk0CdIqTwoiCV9iTs8tloy2fCJjib\nvqDKdJiImnL4ipPuty87BObc2U2NzU+y3TiP2z6kV/zh+7HERlrEka9NQdv9\nk7VGVJg1ARQDqyPfeAm2FYpHvBWojTjWgkIJdIEXmzSwH1Ob43VfRKkVt1CN\noUhOGYkUbRx59piDxapyhZEipUMbsmIwiezDFWfJaX+acLriuwM3qw7PYW3r\nlIsuqbh0fTNRRPV+aFauzH9W89Nr4AgRUVg+HgJReHIahmyMlhUe2KTm/GKf\nizEH+qg/YGDXPvR5gJ+jKhQN+ov2tyGFbqEmBAZPerUBLqpyONceatkGyqzU\nM7jtE85KHktX1qCjY92zZAupfTWl7xTVE6RaMvqXEMp3HvVUM1eiIheA3GMi\nLZMjisps0zhVf0wbJzbf0A2f+YGDILgV1+wzJSP2aE4/xCwV2rO0+ad8EgPu\nSjM3\r\n=8ZeJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnxENI9JZvd7w5MzGQdIUPYwzlnMYs78QJaHMBz8bekQIhALE5dhy/j8R5S/JCoaP9FcEmMJ+aEUbpy9HKp6lXqtHR"}]},"maintainers":[{"name":"cosmicdev","email":"dev@designbycosmic.com"}],"_npmUser":{"name":"cosmicdev","email":"dev@designbycosmic.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cosmic-react-state-management_0.0.2_1566855029448_0.1721143492083934"},"_hasShrinkwrap":false},"0.0.3":{"name":"@designbycosmic/cosmic-react-state-management","version":"0.0.3","main":"dist/index.js","source":"src/index.js","description":"State management using React context and useReducer","author":{"name":"@designbycosmic"},"repository":{"type":"git","url":"git+ssh://git@github.com/designbycosmic/cosmic-react-state-management.git"},"license":"UNLICENSED","scripts":{"prepublishOnly":"babel ./src --out-dir ./dist -s inline"},"peerDependencies":{"react":">= 16.8.0","react-dom":"^16.8.3"},"devDependencies":{"@babel/cli":"^7.5.5","@babel/core":"^7.5.5","@babel/preset-env":"^7.5.5","@babel/preset-react":"^7.0.0"},"gitHead":"adcd9c204003e0c57a14ab624114c6fac4a0ae4d","bugs":{"url":"https://github.com/designbycosmic/cosmic-react-state-management/issues"},"homepage":"https://github.com/designbycosmic/cosmic-react-state-management#readme","_id":"@designbycosmic/cosmic-react-state-management@0.0.3","_npmVersion":"6.4.1","_nodeVersion":"10.12.0","_npmUser":{"name":"cosmicdev","email":"dev@designbycosmic.com"},"dist":{"integrity":"sha512-IejryS5OkmhS+CrbAQv39i+1FYo16ETvnYyeNWawAZKzVUXb8hcth0DRyt65twc9MG9EvjOVY3gWEPwn3zQJUQ==","shasum":"0691b003c820bbaa86d7c756ad86cba4844f1281","tarball":"https://registry.npmjs.org/@designbycosmic/cosmic-react-state-management/-/cosmic-react-state-management-0.0.3.tgz","fileCount":7,"unpackedSize":19624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaEAtCRA9TVsSAnZWagAAQj8P/3hwS2ZeUoT+WSZwWwpD\nv0gOx8HpCAZjbvEAlqCao73LjJY7WKln8FVBrZCOx1iAe8DKm4AAPVyoQCSF\nsoOdFnir8OZ/GSPPFhAWn+DznH1C6QWp2Bw3+wUhoI/dwztk/CPMGKFBA03o\n2M2VPaJeKawJ/HYNQvTICWdCvU86YR3EPXc6yByP2ham1kHXvcaIbP/h3OBf\nYeLc8Q3fW0jptCQV8IaAscTI3b6YCBOcxiUBFOllEZbG68lQ979fj8+bPKVI\nKcqETZIz4objrJfHO2sqV0L5n6AYrnVTIlSgFcCyGWRdH75LcansOkL2Cojk\nx+CrUBCfSoEy69ajZVDXUUiAHMl5wGzvyvo8HT28NoeCz86f+TSgg0K2pCBX\njOZ2WmwaLs1RoQom1/0bDJelnB2BR0bk+SgAs8K8VHd5W+7NvIUAsfRFsH+r\nZmkAZMyWzjODzfqqdIXQeDLkjwy6KPy4H8IoT68QQ1BF0NO/8bJGDowD+8Pc\nC5L5j49aX27yzlCbMl27Wy1Z+PNhilajkYmNy7kVe+Ssbf2wAwLvHZ7deNO+\nno2JU1QW5JjI/9yfbR0WWStDAGviH3illQnOHbfuBX8Ct2HKwThqetIr2Q8u\n4qUc5ogLduwcJOTYONb0SrSH83CiC+f9qssoGS13bszYS6w7Wt0M38Sg+FV1\nnu/T\r\n=2Mgy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAOH+H3iu4Qu14KpNe3y82ZyYaaSQTrBxlqV9ixlVpyrAiEA1o5CWgo7N+UVzpzmCRS6zbktxeyWhqh3MTioIZYNl7o="}]},"maintainers":[{"name":"cosmicdev","email":"dev@designbycosmic.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cosmic-react-state-management_0.0.3_1567113260505_0.02017980253833751"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-26T21:30:29.448Z","0.0.2":"2019-08-26T21:30:29.625Z","modified":"2022-04-05T03:59:18.556Z","0.0.3":"2019-08-29T21:14:20.663Z"},"maintainers":[{"name":"cosmicdev","email":"dev@designbycosmic.com"}],"description":"State management using React context and useReducer","homepage":"https://github.com/designbycosmic/cosmic-react-state-management#readme","repository":{"type":"git","url":"git+ssh://git@github.com/designbycosmic/cosmic-react-state-management.git"},"author":{"name":"@designbycosmic"},"bugs":{"url":"https://github.com/designbycosmic/cosmic-react-state-management/issues"},"license":"UNLICENSED","readme":"# App State\n\nThis is a redux-like approach to state management using React's [Context API](https://reactjs.org/docs/context.html) and the [useReducer hook](https://reactjs.org/docs/hooks-reference.html#usereducer). Basic understanding of these concepts is helpful.\n\n## Inspired by this blog post\n[State Management with React Hooks and Context API in 10 lines of code!](https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c)\n\n## Basic Idea\nWe set up a `context` provider that wraps the entire app. The `value` of that context provider is the result of the `useReducer` hook, which includes the current state, plus a `dispatch` function for updating the state.\n\n## How to Use\n\n1. Set up your `initialState` and `reducer`, and pass these to the `createAppState` function.\n```\n// src/state.js\n\nimport { createAppState } from \"cosmic-react-state-management\";\n\n// Redux-like switch statement reducer \nconst reducer = (state, action) => {\n  switch (action.type) {\n    case \"changeTheme\":\n      return {\n        ...state,\n        color: action.newTheme,\n      };\n      \n    default:\n      return state;\n  }\n};\n\n// An object with the initial app state\nconst initialState = {\n  theme: \"light\",\n};\n\n// After passing the reducer and initial state, `createAppState` returns a\n// React Context provider, consumer, and hook for getting/setting the app state\nexport const { AppStateProvider, AppStateConsumer, useAppState } = createAppState(reducer, initialState);\n\nexport default {\n  AppStateProvider,\n  AppStateConsumer,\n  useAppState,\n};\n```\n\n2.  Wrap the app in the AppStateProvider. To do this in Gatsby, we have to export a function named `wrapRootElement` in `gatsby-browser.js`\n```\n// gatsby-browser.js\n\nimport React from 'react';\nimport { AppStateProvider } from \"./src/state\";\n\nexport const wrapRootElement = ({ element }) => {\n  return (\n    <AppStateProvider>{element}</AppStateProvider>\n  );\n}\n```\n\n3. For **Functional Components**, use the `useAppState` hook.\n```\n// src/components/ThemeChanger.js\n\nimport React, { useContext } from \"react\";\nimport { useAppState } from \"../state\";\n\nconst ThemeChanger = () => {\n  const [{ theme }, dispatch] = useAppState();\n  \n  const changeTheme = dispatch({\n    type: \"changeTheme\",\n    newTheme: theme === \"light\" ? \"dark\" : \"light\",\n  });\n\n  return (     \n    <Button type=\"button\" onPress={changeTheme}>Change Theme</button> \n  );\n};\n\nexport default ThemeChanger;\n```\n\n4.  For **Class-based Components**, use the `AppStateConsumer` wrapper component.\n```\n// src/components/ThemeChangerClass.js\n\nimport { AppStateConsumer } from \"../state\";\n\nclass ThemeChangerClass extends React.Component {\n\n  constructor() {\n    super();\n    this.changeTheme = this.changeTheme.bind(this);\n  }\n\n  changeTheme({ theme }, dispatch) {\n    dispatch({\n      type: \"changeTheme\",\n      newTheme: theme === \"light\" ? \"dark\" : \"light\",\n    });\n  }\n\n  render() {\n    return (\n      <AppStateConsumer>\n        {([ state, dispatch ]) => {\n          return(\n            <button \n              type=\"button\"\n              onClick={() => this.changeTheme(state, dispatch)}\n            >Change Theme</button>\n          );\n        }}\n      </AppStateConsumer>\n    );\n  }\n}\n\nexport default ThemeChangerClass;\n```\n\n5. Optionally define separate reducers for easier code management.\n```\n// combine the reducers and initialState into single objects before passing to `createAppState`\n\nconst reducer = {\n  theme: // theme reducer,\n  user: // user reducer, e.g., logged-in status,\n  nav: // nav reducer, e.g., mobile nav showing\n}\n\nconst initialState = {\n  theme: // theme initial state,\n  user: // user initial state,\n  nav: // nav initial state,\n}\n\nexport const { AppStateProvider, AppStateConsumer, useAppState } = createAppState(reducer, initialState);\n```\n\n\n6. Optionally run \"middleware\" functions before changing state\n```\n// src/state.js\n\nimport { registerMiddleware } from \"cosmic-react-state-management\";\n\nregisterMiddleware({\n  actionType: \"changeTheme\",\n  func: ({ newTheme }) => {\n    // track theme changes in Google Analytics\n    ga.send(\"userChangedTheme\", newTheme);\n  },\n});\n\n```\n> You'll typically want to call `registerMiddleware` from wherever you define your reducer.\n","readmeFilename":"Readme.md"}