Redux를 사용한 최신 반응

이 글은 상태 관리를 위해 Redux를 React 애플리케이션에 통합하는 데 중점을 두고 최신 React에 중점을 둡니다. 생산성을 높이기 위해 useCallback 및 유용한 VS Code 확장과 같은 일부 고급 React 기능을 다룰 것입니다.

컨셉 하이라이트:

1. mapStateToProps
2. mapDispatchToProps
3. React에 Redux를 추가하면 얻을 수 있는 이점
4. 리덕스 썽크
5. 리듀서
6. 선택자
7. VS Code의 React 스니펫

1. mapStateToProps

Redux에서 mapStateToProps는 Redux 저장소의 상태를 React 구성 요소의 props에 매핑할 수 있게 해주는 함수입니다. 이를 통해 구성 요소는 특정 상태에 액세스할 수 있습니다.

구문:

const mapStateToProps = (state) => {
  return {
    data: state.data,
  },
};

예) 이 예에서 mapStateToProps는 Redux 스토어에서 카운트 값을 추출하여 CounterComponent 내에서 prop으로 사용할 수 있도록 합니다.

const mapStateToProps = (state) => {
  count: state.counter.count,
});

export default connect(mapStateToProps)(CounterComponent);

2. mapDispatchToProps

mapStateToProps와 유사하게 mapDispatchToProps는 디스패치 작업을 props에 매핑하여 구성 요소가 Redux 스토어에 작업을 디스패치할 수 있도록 합니다.

구문:

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  },
};

예) 이 예에서 mapDispatchToProps는 IncrementCount를 CounterComponent에 대한 prop으로 제공하여 호출 시 increment() 작업을 전달할 수 있도록 합니다.

const mapDispatchToProps = (dispatch) => ({
  incrementCount: () => dispatch(increment()),
});

3. React에 Redux를 추가하면 얻을 수 있는 이점

Redux는 특히 애플리케이션이 복잡해짐에 따라 React 애플리케이션을 크게 향상시킬 수 있습니다. 주요 혜택은 다음과 같습니다.

• 중앙 집중식 상태 관리: Redux는 중앙 집중식 저장소에서 상태를 관리하여 단일 정보 소스를 제공합니다. 이를 통해 앱 전체의 상태 변경을 더 쉽게 관리하고 예측 가능성을 높일 수 있습니다.

• 상태 지속성: Redux를 사용하면 페이지를 다시 로드하거나 경로를 지정할 때 상태를 더 쉽게 저장하고 유지할 수 있어 UX가 더욱 원활해집니다.

• 디버깅 및 시간 이동 디버깅: Redux DevTools를 사용하면 고급 디버깅이 가능하며 모든 작업과 상태 변경 사항을 검사할 수 있으며, 버그 수정을 위해 이전 상태로 돌아갈 수도 있습니다.

• 우려사항 분리: Redux는 애플리케이션 상태를 UI에서 분리하여 코드의 재사용, 유지 관리 및 테스트가 더욱 용이해집니다.

4. 리덕스 썽크

Redux Thunk는 액션 객체 대신 함수를 반환하는 액션 생성자를 작성할 수 있는 미들웨어입니다. 이를 통해 Redux 작업 내에서 비동기 작업(예: API 호출)을 수행할 수 있습니다.

구문:

 const fetchData = () => {
  return (dispatch) => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
      .then(error => dispatch({ type: 'FETCH_ERROR', error }));
  };
};

예) 이 예에서 fetchPosts는 API에서 데이터를 가져오고 요청의 성공 또는 실패에 따라 작업을 전달하는 비동기 작업입니다.

function fetchPosts() {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_POSTS_REQUEST' });
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await repsosne.json();
      dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: posts });
    } catch (error) {
      dispatch({ type: 'FETCH_POSTS_ERROR', error });
    }
  };
}

5. 감속기

리듀서는 현재 상태와 액션을 인수로 취하고 액션에 따라 새로운 상태를 반환하는 Redux의 순수 함수입니다. 리듀서는 Redux 저장소의 상태를 업데이트하는 역할을 담당합니다.

구문:

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT': 
      return { count: state.count + 1 };
    case 'DECREMENT': 
      return { count: state.count - 1 };
    default: 
      return state;
  }
}

예) 이 예에서 counterReducer는 INCREMENT와 DECREMENT라는 두 가지 작업을 처리하고 이에 따라 상태의 개수를 업데이트합니다.

const rootReducer = combineReducers({
  counter: counterReducer,
});

const store = createStore(rootReducer);

6. 선택자

선택기는 Redux 저장소에서 파생된 상태를 추출하거나 계산하는 데 사용되는 함수입니다. 결과를 메모하여 성능을 향상시키고 상태의 일부에 액세스할 수 있는 명확한 API를 제공합니다.

구문:

const selectCount = (state) => state.counter.count;

예) 이 예에서 selectUserPosts는 현재 사용자의 ID를 기준으로 게시물을 필터링하는 메모화된 선택기입니다. 선택기는 불필요한 재계산을 방지하여 코드를 더욱 효율적으로 만들 수 있습니다.

const selectUserPosts = createSelector(
  [state => state.posts, state => state.userId],
  (posts, userId) => posts.filter(post => post.userId === userId)
};

7. VS Code의 반응 조각

VS Code로 코딩하는 경우 React Snippets 확장 프로그램을 설치하면 작업 흐름 속도를 크게 높일 수 있습니다. 이 확장 프로그램은 구성요소, 후크 및 기타 일반적인 React 코드 구조를 생성하기 위한 편리한 단축키를 제공하여 사용자가 코드 템플릿을 활용하여 깔끔하고 일관된 React 코드를 더 빠르게 작성할 수 있도록 도와줍니다.

예) rfc, rafc 또는 rafce 다음에 Tab 키를 누르면 React 기능 구성 요소에 대한 다음 코드가 생성됩니다.

import React from 'react'

const ComponentName = () => {
  return (
    <div>

    </div>
  )
}

위 내용은 Redux를 사용한 최신 반응의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!