React/Redux가 포함된 레일

상태를 제어하고 최선의 길이 아니었던 학습을 위해 Redux를 사용하는 React 앱을 만들었습니다. 앱은 또한 백엔드API에 데이터를 저장하기 위해 Ruby on Rails를 사용하고 있습니다.
이 앱은 레시피를 저장하고 리뷰를 남길 수 있을 뿐만 아니라 각 레시피가 얼마나 마음에 드는지 등급을 매길 수 있는 요리책입니다.

반응하다

React 앱 생성은 npx create-react-app로 시작하고 구성 요소를 추가하여 시작하기가 매우 쉽습니다. 처음에는 약간 낯설게 느껴졌다가 5분 정도 사용한 후 물건이 제자리를 찾기 시작했습니다. 파일은 파일 맨 위에 있는 import React from 'react'를 사용하여 파일을 대상으로 지정할 수 있으므로 React 프레임워크를 사용하는 적절한 구조처럼 느껴집니다. 이 형식은 홈 파일에서 내보낸 다른 파일을 수집하는 데 사용됩니다.

울타리

보기 생성을 방지하는 api 플래그를 사용하는 빠른 명령rails new CoolBackend --api으로 Rails api를 설정하는 것만큼이나 쉬웠습니다. 또한 주목해야 할 점은 레일 스캐폴드를 사용하면 궁극적으로 이러한 유형의 애플리케이션에 사용되지 않고 React에서 처리할 뷰를 생성할 것이기 때문입니다.

리덕스

Redux는 "전역"상태를 그대로 제어하는 ​​데 사용되는 라이브러리입니다. 상태는 일반적으로 클래스 구성 요소에서 생성된 다음 하위 구성 요소로 전달됩니다. 상태를 여러 하위 구성 요소로 보내는 것은 Redux가 구출하는 데 약간 지루해집니다!

Redux를 사용하면 React 파일 구조의 어느 곳에서나 작업 생성자를 호출하고 상태를 추적하는 데 사용할 수 있습니다. 이 기능은 imported 다른 파일이 수집되는 것과 동일합니다.

일반적인 작업은 모든 레시피 가져오기를 설정하는 방법과 같습니다.

const API = 'http://localhost:3000'

export const fetchRecipes = () => {
  return dispatch => {
    fetch(`${API}/recipes`)
    .then(resp => resp.json())
    .then(recipes => dispatch({ 
      type: 'GET_RECIPES',
      payload: recipes }))
  }
}

이 함수에는 키워드dispatch가 있으며 비동기적으로 작동하는 API 끝점에서 AJAX 요청을 허용하는 redux-thunk에서 사용됩니다.

이 기능을 사용하면 앱의 나머지 부분과 함께 상태를 최신 상태로 유지하고 로컬 상태를 깨끗하고 관리하기 쉽게 유지하는 데 도움이 됩니다.

결론

React와 Redux를 사용한 나의 학습 여정은 혼란스러운 실수로 인해 JavaScript에 익숙해진 직후에 재미있는 여정이었습니다. 하나는 새 경로가 충족되었을 때 상태를 업데이트하는 방법입니다. 이를 위해 componentDidMount()는 /recipes 경로로 이동할 때 레시피 목록을 얻기 위해 빠른 redux 작업 생성기를 실행하는 데 도움이 됩니다.

React/Redux를 좀 더 스트리밍 방식으로 사용하기 위해 조사할 시간이 없었던 모든 React 후크와 함께 더 많은 라이프사이클 메서드가 존재합니다.