https://github.com/camerodev/simple-redux-setup-basic
This React Redux Simple App is a basic application designed to demonstrate the React Redux library and its abilities. The app allows users to log in and display a list of users, as well as add and delete users.
https://github.com/camerodev/simple-redux-setup-basic
counter react redux setup simple
Last synced: about 1 month ago
JSON representation
This React Redux Simple App is a basic application designed to demonstrate the React Redux library and its abilities. The app allows users to log in and display a list of users, as well as add and delete users.
- Host: GitHub
- URL: https://github.com/camerodev/simple-redux-setup-basic
- Owner: camerodev
- Created: 2024-03-15T16:36:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-15T16:37:03.000Z (over 2 years ago)
- Last Synced: 2025-04-07T16:43:29.218Z (about 1 year ago)
- Topics: counter, react, redux, setup, simple
- Language: JavaScript
- Homepage: https://simple-redux0416.netlify.app/
- Size: 284 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Redux Hooks Example
This is a simple example to demonstrate how to use **[React Redux Hooks](https://react-redux.js.org/next/api/hooks#hooks)** in React Project. **[Hooks API](https://reactjs.org/docs/hooks-intro.html)** is a new addition in React 16.8. They allow us to use state and other features in **React Function Component**.
**[Live Demo](https://redux-hooks-example.netlify.com/)**
## Redux Hooks in this example
### useSelector()
```javascript
import { useSelector } from 'react-redux';
const TodoList = () => {
//Get todoList from todoReducer
const todoList = useSelector(state => state.todos.todoList);
}
```
### useDispatch()
```javascript
import { useDispatch } from 'react-redux';
//TodoList React Component
const TodoList = () => {
//Use for all the dispatch actions
const dispatch = useDispatch();
//Add new todo item into List with the action
dispatch({type:'ADD_TODO',payload:newTodoObject});
}
```
## TypeScript
You may want to see what's the different when using Redux Hooks use in TypeScript. Here is the **[TypeScript version of this example](https://github.com/Sunnysit/react-redux-hooks-example/tree/typescript)**
## License
[MIT](https://github.com/microsoft/vscode-test/blob/master/LICENSE)