react redux 예제

그것은 내가 생각해 올 수있는 전체 React Redux 수명 주기의 가장 간단한 예입니다. Redux는 React 앱을 빌드하는 사실상의 방법이 되고 있습니다. 그리고 그것이 어떻게 이루어지는지 보여주는 수많은 예제가 있습니다. 그러나 React-Redux 앱에는 “감속기”, “액션”, “액션 크리에이터”, “상태”, “미들웨어” 등과 같은 부분이 너무 많습니다. 그것은 압도적 일 수 있습니다! 당신이 내이 튜토리얼을 따를 수 있도록하려면 : 반응, 웹 팩, 그리고 Babel을 설정하는 방법 또는 당신은 또한 만들기 반응 응용 프로그램을 사용할 수 있습니다. 지금, 그것은 기사의 목록을 생성하기 위한 JSX 내부의 소품을 사용하는 문제입니다 : 그리고 다음 섹션에서 우리는 마침내 우리의 첫 번째 redux 사가를 구현합니다! 이 예제에서는 초기 상태를 첫 번째 매개 변수로 하는 간단한 감속기(reducer)를 만듭니다. 두 번째 매개 변수로 작업을 제공 합니다. 현재 감속기는 초기 상태를 반환하는 것 외에는 아무 일도 하지 않습니다. 참고: mapStateToProps 양식 예제와 같이 없는 경우 연결에 대한 첫 번째 인수는 null이어야 합니다. 그렇지 않으면 TypeError: 디스패치가 함수가 아닙니다. 이전에 우리는 redux 사가가 포함하는 하나의 파일이 될 수 있음을 보았다 : 축하합니다! 당신은 당신의 첫 번째 redux 사가를 만들었습니다! 내가 그것을 배우기 시작했을 때, 나는 “먼저 구축 할 반응 Redux의 어느 부분”또는 일반적으로 어떤 React-Redux 응용 프로그램을 구축 접근하는 방법을 보여주는 블로그를 찾을 수 없습니다.

그래서 몇 가지 예제와 블로그를 통해 가서 가장 반응 Redux 애플 리케이션을 구축하는 방법에 대한 일반적인 단계를 나왔다. src/js/index.js를 열고 모든 것을 지우고 다음 코드로 파일을 업데이트합니다(대신 src/index.js 를 만드는 경우): 공급자는 react-redux에서 오는 높은 순서의 구성 요소입니다. 먼저, 우리는 우리의 redux 저장소에 우리의 구성 요소를 연결 해야 그래서 우리는 리액트-redux에서 연결을 가져옵니다. 여기서 는 configureStore(예: configureStore: false })와 같은 다른 상태와 함께 configureStore 함수를 사용할 수 있습니다. 이를 위해 src/index.js 내부로 이동하여 공급자를 react-redux에서 가져오고 새로 만든 저장소를 다음과 같이 만듭니다. 우리는 아직 우리가 글로벌 상태를 가지고 우리의 반응 응용 프로그램을 말하지 않은, 또는 당신이 할 경우, 우리는 redux 상태 관리를 사용합니다. 위의 코드에서 볼 수 있듯이 저장소는 createStore의 결과이며, 이 저장소는 redux 라이브러리의 함수입니다. redux 썽크는 많은 프로젝트에 대한 완벽한 의미가 있습니다. 사실 나는 당신이 Redux에서 비동기 흐름을 관리 할 필요성을 느낄 때 redux thunk로 시작하는 것이 좋습니다.

일을 지나치게 복잡하게 할 필요가 없습니다. 또한 redux thunk를 완전히 건너 뛰고 비동기 논리를 사용자 지정 미들웨어로 이동할 수 있습니다. 그러나 실제로 비동기 작업은 테스트하고 구성하는 것이 더 까다로워질 수 있습니다. 예를 들어, 연락처 목록은 우리의 응용 프로그램에서 상태의 조각이 될 수 있으며, 그 목록을 보유하는 완전히 유효한 (하지만 정적) 감속기 될 것입니다 : 이제 우리는이 제품을 가지고, 다시 redux 및 반응 redux를 설치하자 : 나는 그것이 좋은 예가 될 것이라고 생각 을 위해 이 제품을 가지고 구성 요소 상태를 Redux로 교체하십시오.

Posted in Uncategorized