A simple example to demonstrate how to use React Redux Hooks in React Project
React Redux Hooks Example
This is a simple example to demonstrate how to use React Redux Hooks in React Project. Hooks API is a new addition in React 16.8. They allow us to use state and other features in React Function Component.
Redux Hooks in this example
useSelector()
import { useSelector } from 'react-redux';
const TodoList = () => {
//Get todoList from todoReducer
const todoList = useSelector(state => state.todos.todoList);
}
useDispatch()
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