Skip to content

Instantly share code, notes, and snippets.

@SZharkov

SZharkov/actions.js

Last active March 27, 2022 01:53
Show Gist options
  • Save SZharkov/4db80260ee87ec798e282fbb98a7d043 to your computer and use it in GitHub Desktop.
Save SZharkov/4db80260ee87ec798e282fbb98a7d043 to your computer and use it in GitHub Desktop.
Download ZIP
Context API store
Raw
actions.js
import {
ADD_INGREDIENT,
INGREDIENTS_REDUCER,
PREPARING_REDUCER,
REMOVE_INGREDIENT,
SET_INGREDIENT_INPUT_VALUE, SET_INPUT_VALUE, SET_OPTIONAL,
SET_SELECTED_INGREDIENT,
} from "Store/add-new-dish/types";
const useAddNewDishActions = dispatch => {
const addIngredient = () => {
dispatch({
type: ADD_INGREDIENT,
name: INGREDIENTS_REDUCER,
});
};
const removeIngredient = id => {
dispatch({
type: REMOVE_INGREDIENT,
name: INGREDIENTS_REDUCER,
payload: { id },
});
};
return {
addIngredient,
removeIngredient
};
};
export default useAddNewDishActions;
Raw
ingredientsReducer.js
import { SET_INPUT_VALUE } from "../types/index";
export default (state, action) => {
const { payload } = action;
switch (action.type) {
case SET_INPUT_VALUE: {
const { name, value } = payload;
return {
...state,
[name]: value,
};
}
default:
return state;
}
};
Raw
reducers.js
import ingredientsReducer from "./ingredients";
import dishInfoReducer from "./dishInfo";
import { INGREDIENTS_REDUCER, PREPARING_REDUCER } from "Store/add-new-dish/types";
const mainReducer = ({ ingredients, preparing, dishInfo }, action) => ({
ingredients: ingredientsReducer(ingredients, action, INGREDIENTS_REDUCER),
preparing: ingredientsReducer(preparing, action, PREPARING_REDUCER),
dishInfo: dishInfoReducer(dishInfo, action)
});
export default mainReducer;
Raw
store.js
import React, { createContext, useContext, useReducer } from "react";
import mainReducer from "./reducers";
import useAddNewDishActions from "Store/add-new-dish/actions";
import {
DISH_INFO_DESCRIPTION_INPUT,
DISH_INFO_INTERNAL_NAME_INPUT,
DISH_INFO_NAME_INPUT,
} from "Store/add-new-dish/types";
const AddNewDishContext = createContext();
const AddNewDishDispatchContext = createContext();
const initialState = {
ingredients: [],
preparing: [],
dishInfo: {
[DISH_INFO_NAME_INPUT]: "",
[DISH_INFO_INTERNAL_NAME_INPUT]: "",
[DISH_INFO_DESCRIPTION_INPUT]: ""
}
};
const useAddNewDishState = () => useContext(AddNewDishContext);
const useAddNewDishDispatch = () => useAddNewDishActions(useContext(AddNewDishDispatchContext));
const useAddNewDish = () => [useAddNewDishState(), useAddNewDishDispatch()];
const AddNewDishProvider = ({ children }) => {
const [state, dispatch] = useReducer(mainReducer, initialState);
return (
<AddNewDishContext.Provider value={state}>
<AddNewDishDispatchContext.Provider value={dispatch}>
{children}
</AddNewDishDispatchContext.Provider>
</AddNewDishContext.Provider>
);
};
export { AddNewDishProvider, useAddNewDishState, useAddNewDishDispatch, useAddNewDish };
Raw
types.js
// Ingredients
export const ADD_INGREDIENT = "ADD_INGREDIENT";
export const REMOVE_INGREDIENT = "REMOVE_INGREDIENT";
export const SET_INGREDIENT_INPUT_VALUE = "SET_INGREDIENT_INPUT_VALUE";
export const SET_SELECTED_INGREDIENT = "SET_SELECTED_INGREDIENT";
export const SET_OPTIONAL = "SET_OPTIONAL";
export const INGREDIENTS_REDUCER = "INGREDIENTS_REDUCER";
export const PREPARING_REDUCER = "PREPARING_REDUCER";
// Dish Info
export const SET_INPUT_VALUE = "SET_INPUT_VALUE";
export const DISH_INFO_NAME_INPUT = "name";
export const DISH_INFO_INTERNAL_NAME_INPUT = "nameInternal";
export const DISH_INFO_DESCRIPTION_INPUT = "description";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment