반응 리덕스-후크 API

React-Redux의 새로운 기능을 사용하도록 새로운 react-redux 응용 프로그램을 구성하려고합니다. 공식 문서는 말한다

React Redux는 이제 기존 connect () 상위 컴포넌트에 대한 대안으로 후크 API 세트를 제공합니다.

실제 예제와 함께 Hooks API와 관련된 유용한 기사를 찾으려고 노력했지만 모든 react-redux 앱에서 연결 기능을 사용하고 있습니다. 공식 문서도 매우 기본적인 예를 보여줍니다.

useSelector (Hooks API에서 제공)를 사용하여 내 앱의 연결 기능을 변경하고 싶습니다.

내 응용 프로그램의 예제 코드 스 니펫입니다.

//MessagesListContainer
export default connect(
  // mapStateToProps
  (state:State) => ({
    activeUser: getActiveUser(state),   
    messages: getMessagesList(state),   
  })
)(MessagesList)

//Selectors
export const getActiveUser = (state: State) => state.activeUser;
export const getMessagesList = (state : State) => (
  Object.keys(state.messages).map((key : any)=> state.messages[key])
)

export interface IMessagesListProps {
  activeUser?: User;
  messages?: Message[];
}
/**
 *  Messages List
 */
export default class MessagesList extends PureComponent<IMessagesListProps> {
.
.
.
}

후크는 클래스 구성 요소와 호환되지 않습니다. 후크를 사용하려면 클래스 구성 요소를 함수 구성 요소로 변환하십시오. 예를 들어 코드를 리팩토링 할 수 있습니다.

/**
 *  Messages List
 */

const getActiveUser = (state: State) => state.activeUser;
const getMessagesList = (state : State) => (Object.keys(state.messages).map((key : any)=> state.messages[key]));

const MessagesList: React.FC = () => {
  const activeUser = useSelector(getActiveUser);
  const messagesList = useSelector(getMessagesList);

  ....
}

export default MessagesList;

Hooks API는 함수 구성 요소를 용이하게하므로 클래스 구성 요소를 다음과 같이 함수 구성 요소 안에 중첩시킵니다.

//messages-list.container.tsx
//MessagesListContainer
export const MessagesListContainer = () => {
   const activeUser= useSelector((state:State) => getActiveUser(state));
   const messages= useSelector((state:State) => getMessagesList(state));
   return <MessagesList activeUser={activeUser} messages={messages} />
}


//Selectors
export const getActiveUser = (state: State) => state.activeUser;
export const getMessagesList = (state : State) => (
  Object.keys(state.messages).map((key : any)=> state.messages[key])
)

//end of messages-list.container.tsx

//messages-list.component.tsx
export interface IMessagesListProps {
  activeUser?: User;
  messages?: Message[];
}
/**
 *  Messages List
 */
export default class MessagesList extends PureComponent<IMessagesListProps> {
.
.
.
}

내 인식에 따라 마지막 수준의 구성 요소를 매장에서 격리시키는 것이 좋습니다.