{"id":25169726,"url":"https://github.com/sofiane-abou-abderrahim/react-redux-counter","last_synced_at":"2026-04-15T09:32:00.551Z","repository":{"id":239091644,"uuid":"798495413","full_name":"sofiane-abou-abderrahim/react-redux-counter","owner":"sofiane-abou-abderrahim","description":"🚀 React Redux Counter Demo App 📊 - ⚛️ React | 🔄 Redux | 🧰 Redux Toolkit - Experience the power of React and Redux Toolkit in action with this demo app. Featuring a React counter and user authentication form, this project showcases the seamless integration of Redux Toolkit for efficient state management in React applications.","archived":false,"fork":false,"pushed_at":"2024-10-27T23:07:02.000Z","size":1383,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T20:27:26.845Z","etag":null,"topics":["configurestore","createslice","createstore","javascript","react-redux","react-redux-toolkit","reactjs","redux","redux-toolkit","state-management","usedispatch","useselector"],"latest_commit_sha":null,"homepage":"https://sofiane-abou-abderrahim.github.io/react-redux-counter/","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/sofiane-abou-abderrahim.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-09T22:29:07.000Z","updated_at":"2024-05-15T14:29:12.000Z","dependencies_parsed_at":"2024-05-15T15:02:58.832Z","dependency_job_id":null,"html_url":"https://github.com/sofiane-abou-abderrahim/react-redux-counter","commit_stats":null,"previous_names":["sofiane-abou-abderrahim/react-redux-counter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sofiane-abou-abderrahim/react-redux-counter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-redux-counter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-redux-counter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-redux-counter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-redux-counter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sofiane-abou-abderrahim","download_url":"https://codeload.github.com/sofiane-abou-abderrahim/react-redux-counter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-redux-counter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31834534,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T07:17:56.427Z","status":"ssl_error","status_checked_at":"2026-04-15T07:17:30.007Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["configurestore","createslice","createstore","javascript","react-redux","react-redux-toolkit","reactjs","redux","redux-toolkit","state-management","usedispatch","useselector"],"created_at":"2025-02-09T08:36:23.835Z","updated_at":"2026-04-15T09:32:00.489Z","avatar_url":"https://github.com/sofiane-abou-abderrahim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Redux Counter\n\nBuild a React Application with help of Redux which renders a counter that displays a counter value and can be toggled\n\n# Steps\n\n## 0. Preparing a New Project\n\n1. create a `README.md` file\n2. create a `.gitignore` file to ignore `node_modules`\n3. run `npm install`\n4. run `npm install redux react-redux`\n5. run `npm start`\n\n## 1. Creating a Redux Store for React\n\n1. as the common convention recommends, create a `store` folder to store the Redux related files\n2. inside of it, create a `index.js` file in which you will create a store \u0026 a reducer\n3. connect your React app to this Redux store so that the components of this app can dispatch and listen\n   1. export the store as a default\n   2. provide this store to the React app\n\n## 2. Providing the Store\n\n1. go to the `src/index.js`\n2. import the `Provider` component from `react-redux`\n3. wrap the root component with `\u003cProvider\u003e`\n4. import `store` from `store/index`\n5. set the `store` prop on the `\u003cProvider\u003e` component to `store`\n\n## 3. Using Redux Data in React Components\n\n1. utilize this Provider store in the `Counter.js` component\n2. get access to the Redux store into the data to output the current counter value\n   1. import the React Redux's `useSelector` custom hook\n   2. use `useSelector()` inside of the `Counter` function\n3. output the `counter` value\n\n## 4. Dispatching Actions From Inside Components\n\n1. in `Counter.js`, add 2 buttons to increment \u0026 decrement the counter\n2. use `useDispatch()` to dispatch actions \u0026 wire up these buttons with help of 2 functions\n\n## 5. Redux with Class-based Components\n\n1. add a new `Counter` class in `Counter.js` \u0026 extend it to `Component`\n2. render the JSX code inside of it\n3. add all the relevant methods\n4. add the `this` keyword to refer to these methods\n5. get access to Redux with help of the `connect` feature\n\n## 6. Attaching Payloads to Actions\n\n1. add a new `button` to increase the counter by 5 (or any other number) in `Counter.js`\n2. add a new `action.type === increase` in `store/index.js` \u0026 set an `action.amount`\n3. add a new `increaseHandler` function in `Counter.js`\n\n## 7. Working with Multiple State Properties\n\n1. add a new state to the Redux store to show/display the counter\n2. dispatch the `toggle` action inside of the `toggleCounterHandler` in `Counter.js`\n3. get access to this `toggle` state with help of `useSelector()` inside of the `Counter` component \u0026 store it in a `show` constant\n4. render the counter conditionally by using this `show` constant\n\n## 8. Adding State Slices\n\n1. run `npm install @reduxjs/toolkit react-redux`\n2. in `store/index.js`, import `createSlice` from `@reduxjs/toolkit`\n3. use `createSlice()`\n\n## 9. Connecting Redux Toolkit State\n\n1. get rid of `counterReducer` in `store/index.js`\n2. save the `createSlice` value in a new `counterSlice` constant\n3. register this `counterSlice` to the store by calling the `reducer` method on it \u0026 passing it as an argument of `createStore`\n4. use `configureStore` instead of `createStore` \u0026 pass a configurable object to it\n\n## 10. Migrating Everything To Redux Toolkit\n\n1. get hold of the `counterSlice`'s action identifiers for dispatching actions \u0026 export it\n2. import `counterActions` in `Counter.js`\n3. use `counterActions` to dispatch actions\n\n## 11. Working with Multiple Slices\n\n1. in `App.js`, add the `Header` \u0026 `Auth` components\n2. add a brand new `authSlice` for the authentication state with help of `createSlice()` in `store/index`\n3. use the `authActions` in the different components to dispatch actions\n\n## 12. Reading \u0026 Dispatching From A New Slice\n\n1. render conditionally the `Auth` \u0026 `UserProfile` components in `App.js`\n2. render conditionally the navigation in `Header.js`\n3. dispatch the login action when the `Login` button is clicked in `Auth.js`\n4. dispatch the logout action when the `Logout` button is clicked in `Header.js`\n\n## 13. Splitting Our Code\n\n1. add a new `counter.js` file in the `store` folder\n2. add a new `auth.js` file in the `store` folder\n3. in `store/index.js`, create a main store \u0026 merge all the slice reducers together\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-redux-counter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-redux-counter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-redux-counter/lists"}