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.

Live Demo

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

License

MIT