If you never used React Redux before, it’s strongly recommended to run a quick-start before attempting to modify anything in the front-end.The main point on future developments will be to always develop with the props down, events up mentality. In Chartbrew this means that a container should send the props to a component and the component can call any events that were passed down by the container. The events will run in the parent component.The new components should be functional and use React Hooks.::: warning
Currently, the containers are quite huge and some components are not as dumb as they should be. This will be improved with future updates.
:::
// actions/brew.jsimport { API_HOST } from "../config/settings";export const FETCHING_BREW = "FETCHING_BREW"; // this is the type of action, used for identificationexport const FETCHED_BREW = "FETCHED_BREW";export function getBrew(id) { return (dispatch) => { // dispatch is used to send the action to the reducer const url = `${API_HOST}/brew/${id}`; const method = "GET"; const headers = new Headers({ "Accept": "application/json", }); dispatch({ type: FETCHING_BREW }); return fetch(url, { method, headers }) // like in the backend code, Promises are preferred .then((response) => { if (!response.ok) { return new Promise((resolve, reject) => reject(response.statusText)); } return response.json(); }) .then((brew) => { dispatch({ type: FETCHED_BREW, brew }); // dispatching the action together with the payload return new Promise((resolve) => resolve(brew)); }) .catch((error) => { return new Promise((resolve, reject) => reject(error)); }); };}