React, Redux 및 Empable.js를 사용하여 Todo 앱을 구축하는 방법

반응의 구성 요소 기반 아키텍처 및 단방향 데이터 흐름은 UI 구조화에 이상적입니다. 그러나 국가 관리 도구는 의도적으로 간단하여 MVC (Model-View-Controller) 패턴의 뷰를 주로 처리한다는 것을 상기시켜줍니다. RECT와 함께 대규모 응용 프로그램을 구축 할 수는 있지만 효율적인 코드에는 외부 상태 관리가 필요합니다. 공식 반응 국가 관리 솔루션은 존재하지 않지만 여러 라이브러리는 패러다임과 완벽하게 통합됩니다. 이 기사는 Redux and Empable.js. 키 테이크 아웃 :

redux and unmutable.js는 중앙 집중식 상태 컨테이너와 불변 데이터 구조를 제공하여 더 큰 응용 프로그램에 대한 React의 기능을 향상시킵니다. REACT, REDUX 및 ENMUTABLE.JS TODO 앱은 구성 요소를 작성하고, 불변성 JS 컬렉션으로 데이터를 변환하고, 상태 업데이트 작업을 정의하고, 조치를 처리하고 새로운 상태를 생성하고 매장 및 컨테이너를 통해 모든 것을 연결하기위한 감소기 설계 . React 및 Redux 생태계는 처음에는 복잡해 보일 수 있지만, 기본 개념은 전송 가능하고 다른 아키텍처 및 언어를 배우는 데 가치가있어 웹 개발에 필수적입니다.

.

redux : 중앙 상태 컨테이너

Flux and Elm에서 영감을 얻은 Redux는 응용 프로그램 상태의 중심 저장소 역할을하는 경량 라이브러리입니다. 다음 원칙을 사용하여 상태 변경 사항을 적용합니다 단일 스토어는 전체 애플리케이션 상태를 보유합니다 상태 업데이트는 직접 돌연변이가 아닌 조치

를 통해서만 발생합니다

Redux Store의 코어는 감속기 기능입니다. 이 함수는 현재 상태와 조치를 취하여
• new
상태를 반환합니다. 반응 구성 요소는 작업을 매장에 파견하여 필요에 따라 구성 요소 재 렌더를 트리거합니다. Emutablejs : 불변 데이터 구조
• redux가 직접 상태 돌연변이를 방지하기 때문에 불변의 데이터 구조를 사용하면 이러한 제약 조건을 시행합니다. EmutableJS는 Clojure와 Scala의 영감을 얻은 Mutable와 같은 인터페이스를 갖춘 효율적인 불변성 컬렉션을 제공합니다. 데모 : 간단한 할 일 목록 </prev> </li> <reac>이 예제는 React, Redux 및 EmpilableJS를 사용하여 작업의 추가 및 완료 전환을 허용하는 TODO 목록을 작성합니다. 전체 코드는 github에서 사용할 수 있습니다 [Github Repo 링크는 여기에 갈 것입니다]. <li> 설정 </li> </reac></store> </ul> <ol> <fol> 프로젝트 폴더를 생성하고 <enc> 필요한 종속성을 설치하십시오 : <li> <code>package.json</code> <code>npm init</code> <s> 우리는 Webpack을 통해 Babel과 함께 편집 된 JSX 및 ES2015를 사용합니다. : 를 작성하십시오 </s> </li> <li> </li> <scr> 빌드 스크립트를 </scr></enc></fol> </ol> : 에 추가하십시오 <pre class='brush:php;toolbar:false;'>npm install --save react react-dom redux react-redux immutable npm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react

  로그인 후 복사
  3. run <🎜 🎜>를 컴파일합니다 <🎜 🎜> <<> 반응 구성 요소 webpack.config.js <🎜 🎜> 우리는 두 가지 구성 요소의 구성 요소를 만들 것입니다 : <🎜 🎜>와 <🎜 🎜>. (구성 요소 코드는 원래 입력과 유사하지만 명확성과 간결함을 위해 약간 조정할 수있는 원래 입력과 유사하게 여기에 삽입됩니다).
  <<> redux 및 불변의 통합 <🎜 🎜>
  더미 데이터를 더미 데이터를 EmpilableJS 컬렉션으로 변환합니다. 는 부정확 한 JS 메소드를 사용하도록 구성 요소를 조정합니다 (예 : <🎜 🎜 대신 <🎜 🎜>).

  module.exports = {
    entry: './src/app.js',
    output: {
      path: __dirname,
      filename: 'bundle.js'
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: { presets: ['es2015', 'react'] }
        }
      ]
    }
  };

  <<> 행동
  <🎜 🎜> todos 추가 및 토글을위한 액션 제작자 정의 : (액션 제작자 코드는 여기에 삽입됩니다). <🎜 🎜> <<> experer
  4. package.json 동작을 처리하고 상태를 업데이트하기 위해 감속기 함수를 만듭니다.
  <<> 구성 요소 연결 및 저장
  <🎜 🎜> <🎜 🎜>를 사용하여 스토어를 만들고 반응 구성 요소에 연결하십시오. <🎜 🎜> <<> 결론

  "scripts": {
    "build": "webpack --debug"
  }

  React 및 Redux 생태계에는 가파른 학습 곡선이 있지만 기본 원리는 널리 적용됩니다. 이 소개는 유사한 아키텍처와 언어를 탐색하기위한 토대를 제공합니다. 현대 웹 개발자에게는 행동 기반 아키텍처 및 불변의 데이터의 숙련도가 점점 더 가치가 있습니다. Redux를 사용하여 REDUX를 사용하여 FAQS (이 섹션은 여기에 추가되고, 더 나은 가독성을 위해 재구성되고, 잠재적으로 단축/간결하게 요약 될 것입니다) npm run build

  위 내용은 React, Redux 및 Empable.js를 사용하여 Todo 앱을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!