Skip to content

Instantly share code, notes, and snippets.

@pubudu-ranasinghe
Created November 3, 2019 03:24
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save pubudu-ranasinghe/e8f3037ce03fb694dd5830e7a502e832 to your computer and use it in GitHub Desktop.
react-context-example-11
import React, { createContext, useReducer, useContext } from "react";
export const TodoContext = createContext();
// Initial state
const initialItems = [
"Extract todo state to todo context",
"Implement todo provider"
];
// Actions
export const ADD_TODO = "ADD_TODO";
export const REMOVE_TODO = "REMOVE_TODO";
export const CLEAR_ALL = "CLEAR_ALL";
// Action creators
export function addTodo(text) {
return { type: ADD_TODO, text };
}
export function removeTodo(index) {
return { type: REMOVE_TODO, index };
}
export function clearAll() {
return { type: CLEAR_ALL };
}
// Reducer
export function todoReducer(state, action) {
switch (action.type) {
case ADD_TODO:
return [...state, action.text];
case REMOVE_TODO:
const copy = [...state];
copy.splice(action.index, 1);
return copy;
case CLEAR_ALL:
return [];
default:
return state;
}
}
function TodoProvider(props) {
const [items, dispatch] = useReducer(todoReducer, initialItems);
const todoData = { items, dispatch };
return <TodoContext.Provider value={todoData} {...props} />;
}
function useTodoContext() {
return useContext(TodoContext);
}
export { TodoProvider, useTodoContext };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment