Рубрики
Без рубрики

Использование отдачи с React

Новая библиотека управления государством для React, если вы хотите узнать больше о ее нуждающейся … Tagged с JavaScript, React, Recoil, Beginters.

Новая библиотека управления государством для React

Если вы хотите узнать больше о его потребностях и мыслительном процессе, стоящем за ней. Пожалуйста, перейти к: Отдача домашняя страница и посмотрите видео внизу страницы.

Введение:

Во -первых: Основное использование отдачи – это введение Атом Анкет

import { atom } from 'recoil'

export const DataEntriesAtom = atom({
  key: 'dataEntries', // * unique Key (with respect to other atoms/selectors)
  default: [] // * default value (aka initial value)
})

Код является самоуверенем с комментариями.

Вот как вы используете его в компоненте.

import React from 'react'
import { useRecoilState } from 'recoil'
import moment from 'moment'

// * Atoms
import { DataEntriesAtom } from '../../Recoil/Data/Atoms'

// * Style
import './index.css'

export default props => {
  const [logbookEntries, setLogbookEntries] = useRecoilState(DataEntriesAtom)

  return (
    

      

        
Logbook

      

      

        {logbookEntries.map(entry => (
          

            

              {moment(entry.createdAt).format('MMMM Do YYYY')}
            

            
{entry.value}

          

        ))}
      

    

  )
}

Но каково использование атома, который вы спрашиваете? Если вы используете DataEntriesatom в любом другом компоненте, и вы называете SetLogBookEntries Из этого компонента отдача контролирует изменение в этом конкретном атоме и только повторно использует компонент, который использует это Атом Анкет Простой, но эффективно.

Это уменьшает код шаблона, который вы должны написать, и, скажем, у вас есть дерево DOM с двумя основными ветвями, которые не имеют связи друг с другом, но вы хотите, чтобы узел отдельной ветви изменил свое значение, как только вы измените значение текущей ветви.

Используя Redux, вам придется написать много кода, чтобы заставить это работать. Но в этом случае просто определение атома с заработной платой.:)

Кроме того, обратите внимание, что мы используем UsercoilState, импортированный из отдачи.

Во -вторых: Отдача введена Селектор Анкет

import { selector } from 'recoil'

// * Atom
import { DataEntriesAtom } from './Atoms';

// * API calls
import {
  GetDataEntriesAPI
} from '../../Api/Data'

export const GetDataEntriesQuery = selector({
  key: 'dataEntriesQuery',
  get: async ({ get }) => {
    let previousEntries = get(DataEntriesAtom);
    let entries = await GetDataEntriesAPI()

    return previousEntries.concat(entries)
  }
})

Селекторы представляют производное состояние. Вы можете думать о полученном состоянии как о результатах прохождения состояния к чистой функции, которая каким -то образом изменяет заданное состояние.

Давайте настроим отдачу:

В вашем файле JS Parent (в моем случае это index.js)

Для асинхронных вызовов: вы можете использовать Shapense, вызывая селектор, отдача будет управлять загрузкой компонента для вас.

import React from 'react'
import ReactDOM from 'react-dom'
import { RecoilRoot } from 'recoil'

// * Routes
import Routes from './Routes'

// * Styling
import './index.css'

ReactDOM.render(
  
    
      Loading...
}> , document.getElementById(‘root’) )

Оригинал: “https://dev.to/iamawaisakram/using-recoil-with-react-4api”

Читайте ещё по теме: