techomoro

import React from "react";
import { useRecoilValue } from "recoil";
import { lengthState } from "../selectors/name";

export default function LengthComponent() {
  const length = useRecoilValue(lengthState);

  return <h3 className="length">{length}</h3>;
}

techomoro

import React from "react";
import { useRecoilState } from "recoil";
import { nameState } from "../atoms/name";

export default function InputComponent() {
  const [name, setName] = useRecoilState(nameState);

  let handleChangeInput = (e) => {
    setName(e.target.value);
  };

techomoro

import React from "react";
import InputComponent from "./InputComponent";
import LengthComponent from "./LengthComponent";

export default function Main() {
  return (
    <div className="main">
      <InputComponent />
      <LengthComponent />
    </div>

techomoro

import { selector } from "recoil";
import { nameState } from "../atoms/name";

export const lengthState = selector({
  key: "lengthState", // unique ID (with respect to other atoms/selectors)
  get: ({ get }) => {
    const name = get(nameState);
    const lengthOfName = name.length;
    return lengthOfName;
  },

techomoro

import { atom } from "recoil";

export const nameState = atom({
  key: "nameState", // unique ID (with respect to other atoms/selectors)
  default: "", // default value (aka initial value)
});

techomoro

import React from "react";
import { RecoilRoot } from "recoil";
import Main from "./components/Main";
import "./style.css";

function App() {
  return (
    <RecoilRoot>
      <Main />
    </RecoilRoot>

techomoro

import { MDBDataTable } from "mdbreact";
import { useEffect, useState } from "react";

function App() {
  const [posts, setPosts] = useState([]);
  const [usersForRender, setUsersForRender] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())

techomoro

// App.js

import { Table } from "react-bootstrap";
import { useEffect, useState } from "react";
import WooCommerceRestApi from "@woocommerce/woocommerce-rest-api";
import moment from "moment";

const api = new WooCommerceRestApi({
  url: "https://floyet.mars-cdn.com",
  consumerKey: "ck_67292b774e164a94c13c64e0b4059fabfcc036e5",

techomoro

// store/sagas.js

import { all, fork } from "redux-saga/effects";

import PostSaga from "./posts/saga";

export default function* rootSaga() {
  yield all([fork(PostSaga)]);
}

techomoro

// store/reducers.js

import { combineReducers } from "redux";

import PostReducer from "./posts/reducer";

const rootReducer = combineReducers({
  PostReducer,
});