React-Redux 응용 프로그램의 유틸리티 기능을 어디에 배치해야 합니까?

React-Redux 응용 프로그램의 유틸리티 기능을 어디에 배치해야 합니까?

React-Redux 어플리케이션에서는 다음과 같은 상태가 됩니다.

state = {
    items: [
        { id: 1, first_name: "John", last_name: "Smith", country: "us" },
        { id: 2, first_name: "Jinping", last_name: "Xi", country: "cn" },
    ]
}

React 컴포넌트를 사용하여 렌더링합니다.

이제 나는 한 사람의 "전체 이름"을 알려주는 기능이 필요하다.따라서 "first_name + last_name"뿐만 아니라 국가에 따라 다릅니다(예를 들어 중국에서는 "last_name + first_name"). 따라서 비교적 복잡한 로직이 있습니다. 이 로직은 모든 React 컴포넌트에서 사용할 수 있는 함수로 정리하고 싶습니다.

OOP에서는, 다음과 같이 작성됩니다.Person::getFullName()이 정보를 얻을 수 있는 방법을 알고 있습니다.하지만, 그stateobject는 서브패킷에 특별한 메서드가 없는 "오브젝트"입니다.

React-Redux에서 일반적으로 이를 관리하는 권장 방법은 무엇입니까?생각할 수 있는 것은 다음과 같은 글로벌 기능을 만드는 것뿐입니다.user_getFullName(user)사용자가 풀네임을 반환할 수 있지만, 그다지 우아하지는 않습니다.제안해 주실 수 있나요?

저는 어플리케이션에서 이런 경우를 위한 라이브러리를 작성하는 접근방식을 따르고 있습니다.지금까지는 이 방법이 매우 효과적입니다.

이 경우 새로운 모듈을 만듭니다.{ComponentRoot}/lib/user.js함수를 내보냅니다.getFullName(user)혹은 어쩌면getFullName(firstName, lastName, country)상황에 따라 다릅니다.

이제 글로벌 기능이 필요 없는 모듈을 Import하기만 하면 됩니다.

import React from 'react'
import {getFullName} from '../lib/user'

const Title = ({user}) =>
    <div>
        {getFullName(user)}
    </div>

---

라이브러리 폴더는 컴포넌트 폴더 등과 같은 레벨에 배치하고 있습니다만, 고객에게 최적인 것을 사용해 주세요.

우선, Redux는 당신의 어플리케이션의 파일 구조에 대해 아무런 의견을 가지고 있지 않습니다.몇몇 유명한 보일러 플레이트 프로젝트들은 코드를utils/폴더:

• 반응 평판
• 리액트-유니버설-핫-유니버설-핫-유니버스
• 반응 열선
• 전자-전자-전자-전자-전자-전자-전자-전자-전자-전자판

샘플 폴더 구조:

src/
  components/
    ...
  reducers/
    ...
  utils/
    ...

언급URL : https://stackoverflow.com/questions/40870777/where-to-put-utility-functions-in-a-react-redux-application