{"id":28104104,"url":"https://github.com/eastend-street/react-redux-vs-context","last_synced_at":"2025-05-13T20:43:31.644Z","repository":{"id":36478154,"uuid":"227709895","full_name":"eastend-street/react-redux-vs-context","owner":"eastend-street","description":"Practice to understand redux and context api","archived":false,"fork":false,"pushed_at":"2023-01-04T13:38:39.000Z","size":1619,"stargazers_count":1,"open_issues_count":23,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-03T12:56:38.995Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eastend-street.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-12T22:42:35.000Z","updated_at":"2019-12-13T00:32:24.000Z","dependencies_parsed_at":"2023-01-17T02:00:44.946Z","dependency_job_id":null,"html_url":"https://github.com/eastend-street/react-redux-vs-context","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eastend-street%2Freact-redux-vs-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eastend-street%2Freact-redux-vs-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eastend-street%2Freact-redux-vs-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eastend-street%2Freact-redux-vs-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eastend-street","download_url":"https://codeload.github.com/eastend-street/react-redux-vs-context/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254022997,"owners_count":22001231,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-13T20:41:24.354Z","updated_at":"2025-05-13T20:43:31.619Z","avatar_url":"https://github.com/eastend-street.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React vs Context API\n\nThis is a practice to learn the difference between redux and context api.  \nThe original code from https://github.com/academind/react-redux-vs-context/tree/redux  \nAlso edited version from https://github.com/Saayaman/redux-context-example\n\n# Branch\n\n- ### [master](https://github.com/eastend-street/react-redux-vs-context/tree/master)  \n  Best practice, hybrid as redux and context api. same as [context-and-redux](https://github.com/eastend-street/react-redux-vs-context/tree/context-and-redux)\n\n\u003cbr/\u003e\n\n- ### [redux](https://github.com/eastend-street/react-redux-vs-context/tree/redux)  \n   Only using Redux. No react hooks, contextAPI.\n\n\u003cbr/\u003e\n\n- ### [make-context](https://github.com/eastend-street/react-redux-vs-context/tree/make-context)  \n   Using context api to prevent props drilling. No redux.\n\n\u003cbr/\u003e\n\n- ### [context-hooks](https://github.com/eastend-street/react-redux-vs-context/tree/context-hooks)  \n   Using context api and hooks(useContext). By using hooks, you don't have to write code so much.\n\n    ```javaScript\n    // Only context api\n    // Only context api, you need to write consumer and value argument\n    return (\n    \u003cShopContext.Consumer\u003e\n        {value =\u003e (\n            \u003c\u003e\n            \u003cMainNavigation cartItemNumber={cartItemCount(value.cart)} /\u003e\n    ```\n\n    ```javaScript\n    // Using hooks(useContext)\n    // after using useContext, you don't have to use consumer. Just only use useContext and import value.\n    const value = useContext(ShopContext);\n    return (\n        \u003c\u003e\n        \u003cMainNavigation cartItemNumber={cartItemCount(value.cart)} /\u003e\n    ```\n\u003cbr/\u003e\n\n- ### [redux-usereducer](https://github.com/eastend-street/react-redux-vs-context/tree/redux-usereducer)  \n   Using redux and hooks(useReducer). If you use useReducer, you can get `state` and `dispatch` from useReducer.  \n   You don't have to use `mapDispatchProps`, `mapStateProps`.\n\n    ```javascript\n        import reducer, { initialState } from \"./store/reducers\";\n\n        const App = () =\u003e {\n        const [state, dispatch] = useReducer(reducer, initialState);\n\n        return (\n            \u003cBrowserRouter\u003e\n                \u003cSwitch\u003e\n                    \u003cRoute path=\"/\" render={()=\u003e \u003cProductsPage state={state} dispatch={dispatch} /\u003e} exact /\u003e\n                    \u003cRoute path=\"/cart\" render={()=\u003e \u003cCartPage state={state} dispatch={dispatch} /\u003e} exact /\u003e\n                \u003c/Switch\u003e\n            \u003c/BrowserRouter\u003e\n        );\n        };\n    ```\n\u003cbr/\u003e\n\n- ### [context-and-redux](https://github.com/eastend-street/react-redux-vs-context/tree/context-and-redux)  \n   Hybrid context and redux. State is being managed by Redux, props drilling is resolved by context api(Provider)\n   By using context api, we don't have to write so much redux code like `mapDispatchToProps` etc.  \n   \n   **Redux =\u003e controls global states (using useReducer)\n   **Context API =\u003e used only to pass down props\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feastend-street%2Freact-redux-vs-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feastend-street%2Freact-redux-vs-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feastend-street%2Freact-redux-vs-context/lists"}