Using Recoil instead of Redux For State Management In React Applications

• Recoil

  81 19,447 4.7 JavaScript

  Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

  

Recoil is an open-source state management library with more than 14k stars on Github, it was invented by Dave McCabe, a Software Engineer at Facebook. It provides a global state so all components in a React application can share states easily and it is minimal compared to Redux with no boilerplate code setup needed.

• anime-quote-generator

  1 3 3.2 JavaScript

Github repository for tutorial project

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• styled-components

  222 40,061 8.7 TypeScript

  Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

  

This component will render the title of an anime passed to it, and when clicked, it will route us to a page where we’ll see quotes from that anime. First, we need to install react-router-dom for routing between pages in our app and styled-components for styling. Let’s do that with the command below:

• redux-toolkit

  287 10,396 9.9 TypeScript

  The official, opinionated, batteries-included toolset for efficient Redux development

  

Among all the state management libraries available for use in React apps, Redux is the most popular even ahead of React’s Context APIs. There are also other awesome state management libraries used in React apps one of which is Recoil. Recoil unlike Redux is very easy to set up, even easier to set up than the new Redux toolkit library. In this article, we will learn how to use Recoil to manage states in React apps instead of Redux.

• redux

  268 60,449 9.0 TypeScript

  A JS library for predictable global state management

  

Among all the state management libraries available for use in React apps, Redux is the most popular even ahead of React’s Context APIs. There are also other awesome state management libraries used in React apps one of which is Recoil. Recoil unlike Redux is very easy to set up, even easier to set up than the new Redux toolkit library. In this article, we will learn how to use Recoil to manage states in React apps instead of Redux.

• animechan

  3 1,242 8.1 TypeScript

  A REST API for anime quotes

import { useState, useEffect } from "react"; import { Link, useParams } from "react-router-dom"; import axios from "axios"; import styled from "styled-components"; import SmallQuote from "../../components/SmallQuote/SmallQuote"; const Animepage = () => { const param = useParams(); const [quotes, setQuotes] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { if (param?.name) { setLoading(true); const fetchAnimeQuotes = async () => { try { const res = await axios.get( `https://animechan.vercel.app/api/quotes/anime?title=${param?.name}` ); setQuotes(res?.data); setLoading(false); } catch (error) { console.log(error); setLoading(false); } }; fetchAnimeQuotes(); } }, [param]); return (

Quotes from {param?.name}

Go back

{loading ? (

Loading...

) : quotes?.length ? ( quotes?.map((quote, index) => (

)) ) : (

No Quote found 😞

)}

); }; const StyledAnimePage = styled.div` max-width: 80%; margin: 2rem auto; position: relative; & > a { position: absolute; top: 1rem; text-decoration: none; } & > h2 { font-weight: 400; letter-spacing: 3px; text-align: center; margin-bottom: 2rem; } & > .grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: max-content; & .anime { margin: 1rem; height: max-content; } & > p { margin: 2rem 0 4rem; font-size: 1.3rem; text-align: center; } } `; export default Animepage;

Suggest a related project