🥢Redux의 선택기

A “selector” is simply a function that accepts Redux state as an argument and returns data that is derived from that state.

A selector is a small function you write that can take the entire Redux state, and pick out a value from it.

mapStateToProps가 어떻게 작동하는지 아십니까? 전체 상태를 가져와서 값을 선택하는 방법은 무엇입니까? 선택자는 기본적으로 그렇게 합니다. 그리고 보너스로 상태가 변경될 때까지 값을 캐싱하여 성능도 향상됩니다. 음 – 성능을 향상시킬 수 있습니다.

선택자를 사용해야 하는 이유는 무엇입니까?

Redux 저장소 상태를 최소화하고 필요에 따라 상태에서 데이터를 파생시키는 것이 가장 좋습니다. 선택자는 이를 도와줍니다. 그들은 파생된 데이터를 계산할 수 있어 Redux가 가능한 최소한의 상태를 저장할 수 있습니다. 선택자도 매우 효율적입니다. 선택자는 인수 중 하나가 변경되지 않는 한 다시 계산되지 않습니다.

선택기의 몇 가지 예:

기초적인 :

selectUsers = state => state.users;

ID를 사용하여 약간 복잡함:

selectUserIds = state => state.users.map(user => user.id);

더 복잡한:

selectUserIdsOfName = (state, name) => state.users.filter(user => user.name === name);

예

Redux는 상태를 저장할 수 있는 저장소를 제공합니다. 더 큰 앱에서 해당 상태는 일반적으로 개체의 각 키가 별도의 감속기에 의해 관리되는 개체입니다.

{
  currentUser: {
    token,
    userId,
    username
  },
  shoppingCart: {
    itemIds,
    loading,
    error
  },
  products: {
    itemsById,
    loading,
    error
  }
}

첫째, 선택자 없이

Redux 상태에서 React 구성 요소로 데이터를 가져와야 할 때 전체 상태를 취하고 필요한 부분을 선택하는 mapStateToProps 함수를 작성합니다.

장바구니에 담긴 상품을 보여주고 싶다고 가정해 보겠습니다. 그러기 위해서는 아이템이 필요합니다. Buuut shoppingCart에는 항목이 없습니다. 항목 ID만 있습니다. 각 ID를 가져와서 products.items 배열에서 찾아보아야 합니다. 이를 수행하는 방법은 다음과 같습니다.

function mapStateToProps(state) {
  return {
    items: state.shoppingCart.itemIds.map(id => 
      state.products.itemsById[id]
    )
  }
}

상태 모양을 변경하면 mapStateToProps가 중단됩니다.

이제 – "알다시피... shoppingCart는 독립 실행형이 아닌 currentUser의 속성이어야 합니다."라고 결정하면 어떻게 됩니까? 그런 다음 상태를 다음과 같이 재구성합니다.

currentUser: {
    token,
    userId,
    username,
    shoppingCart: {
      itemIds,
      loading,
      error
    },
  },
  products: {
    itemsById,
    loading,
    error
  }
}

글쎄, 이제 이전 mapStateToProps 기능이 손상되었습니다. 현재 state.shoppingCart 에 있는 state.currentUser.shoppingCart 를 참조합니다.

앱에 state.shoppingCart 를 참조하는 여러 위치가 있는 경우 모든 위치를 업데이트하는 것은 고통스러울 것입니다. 성가신 업데이트 프로세스에 대한 두려움이나 회피가 상태를 재구성해야 함을 알면서도 상태를 재구성하지 못하게 할 수도 있습니다.

상태의 모양에 대한 지식을 중앙 집중화할 수 있는 방법이 있다면… 원하는 데이터를 찾는 방법을 알고 있는 일종의 함수라고 부를 수 있습니다.

글쎄, 그것이 바로 선택기의 용도입니다 :)

리팩토링: 간단한 선택기 작성

깨진mapStateToProps을 다시 작성하고 상태 액세스를 선택기로 가져옵니다.

// put this in some global-ish place,
// like selectors.js,
// and import it when you need to access this bit of state
function selectShoppingCartItems(state) {
  return state.currentUser.shoppingCart.itemIds.map(id => 
    state.products.itemsById[id]
  );
}

function mapStateToProps(state) {
  return {
    items: selectShoppingCartItems(state)
  }
}

다음에 상태 모양이 변경되면 하나의 선택기를 업데이트하면 완료됩니다.

메모이제이션

애플리케이션에서 선택기를 사용하면 성능 최적화를 제공할 수도 있습니다. 필요한 데이터를 얻기 위해 상점의 상태에 대해 집중적인 정렬 작업을 실행해야 하는 구성 요소가 있다고 가정해 보겠습니다. mapStateToProps() 함수에서 선택기를 사용하지 않고 작업을 수행하는 경우 전달된 작업으로 인해 상태가 업데이트될 때마다 작업이 실행됩니다.

데이터가 변경될 때만 값비싼 정렬 작업을 실행할 수 있다면 좋을 것입니다. 여기서 메모이제이션의 개념이 구출됩니다.

메모이제이션은 캐싱의 한 형태입니다. 여기에는 함수에 대한 입력을 추적하고 나중에 참조할 수 있도록 입력과 결과를 저장하는 작업이 포함됩니다. 이전과 동일한 입력으로 함수를 호출하면 함수는 실제 작업을 건너뛸 수 있으며 해당 입력 값을 마지막으로 수신했을 때 생성한 것과 동일한 결과를 반환할 수 있습니다.

결론

선택기는 Redux 상태를 인수로 받아들이고 해당 상태에서 파생된 데이터를 반환하는 함수입니다. 선택기는 애플리케이션에 성능 최적화를 제공하고 전역 상태 트리를 캡슐화하는 데 도움이 될 수도 있습니다.