You can pass on an array (Monster) from data fetching to setting the state on monsters and filteredMonsters. You’ll notice filteredMonsters inherits the array from monsters and doesn’t need to be defined again.
Redux-Saga is a middleware library used to allow a Redux store to asynchronously interact with resources outside of itself. Redux-Saga helps in: making HTTP requests. accessing browser storage.
First install Redux Saga:
npm install redux-saga
Then update your store to include thunk to your middleware like so:
Sagas are implemented as Generator functions that yield objects to the redux-saga middleware. The yielded objects are a kind of instruction to be interpreted by the middleware. When a Promise is yielded to the middleware, the middleware will suspend the Saga until the Promise completes.
Here is an example of how a generator function works:
Create a file called category.saga.js and add your actions and asynchronous function:
Thunk allows us to dispatch actions manually, which gives us the power to incorporate some logic or run some asynchronous code before dispatching an action.
First install Redux Thunk:
npm install redux-thunk
Then update your store to include thunk to your middleware like so:
If you have any logic or asynchronous code you are running in your component that you run before you dispatch , now you can add those to your action files instead. First you’ll need to modify your reducer with new action types to handle these states.
Earlier we only had one action type which was GET_CATEGORIES. We now can have three different actions: START, SUCCESS and FAILED. This is because we will now have asynchronous code inside our actions file which will allow us to know the order of our actions.
The functions fetchCategoriesStart, fetchCategoriesSuccess, fetchCategoriesFailed are like earlier actions without thunk installed. It was also why we could only have one action. The new function that has the logic and asynchronous code is called fetchCategoriesAsync (Thunk recommends to include the word Async in the name so we know that this function is in fact asynchronous). This new function includes all our actions (start, success and failed) depending on what’s pulled back from the data source.
Now you only need to dispatch fetchCategoriesAsync inside our component shop:
import { useEffect } from "react";
import { Routes, Route } from "react-router-dom";
import { useDispatch } from "react-redux";
import CategoriesPreview from "../categories-preview/categories-preview.component";
import Category from "../category/category.component";
import { fetchCategoriesAsync } from "../../store/categories/categories.action";
const Shop = () => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchCategoriesAsync());
}, []);
return (
<Routes>
<Route index element={<CategoriesPreview />}></Route>
<Route path=":category" element={<Category />}></Route>
</Routes>
);
};
export default Shop;
And finally you can update your GUI with a loading spinner when we are waiting for data inside the Category component:
Redux Devtools is a Chrome extension which you need to install first.
Then update your composer in your store to use Redux Devtools when not in the production environment and only when a window object exists (so it doesn’t break when building).
Now when you view your redux site in Chrome the Devtools extension will be highlighted and you can view all the live states and even do a playback of all the states. Very useful for debugging complex applications.
Currying a function is essentially a function that returns back another function. The reason you do this is maybe function “curryFunc” receives some variable “a”. What happens is the return function might use “a” inside of it. But what it does is it depends on two additional properties that you add to it as new parameters for this function.
const curryFunc = (a) => (b, c) => {
a + b - c
}
const with3 = curryFunc(3);
const with10 = curryFunc(3);
with3(2, 4); // 3 + 2 - 4
with10(9, 2); // 3 + 9 - 2
The above example shows how you can create functions from a function (reusable functions).
This type of logic is very helpful when creating our own custom middleware functions for Redux.
You can further make the main content contain another component by creating a new component called <x-test></x-test> inside the new section. Then in components folder create a template called test.blade.php and add the content you want.
Part 3
Pass data to components
Open routes to add proper controller to the route:
