집 >웹 프론트엔드 >JS 튜토리얼 >React-redux 플러그인 프로젝트 실제 사용 분석

React-redux 플러그인 프로젝트 실제 사용 분석

php中世界最好的语言원래의: 2018-06-07 11:38:561314검색

이번에는 React-redux 플러그인 프로젝트의 실제 사용에 대한 분석을 가져오겠습니다. React-redux 플러그인 프로젝트의 실제 사용 시 주의사항은 무엇입니까? 봐.

먼저 Redux에 대한 간단한 소개를 확인하실 수 있습니다

react-redux 소개

react-redux는 redux를 사용하여 React를 개발할 때 사용하는 플러그인입니다. 또한, redux는 React의 제품이 아닙니다. , vue 및 angle에서 사용됩니다. redux를 사용할 수도 있습니다. 여기에서는 React-redux를 사용하여 React를 개발하는 방법에 대한 간략한 설명을 제공합니다.

Description

이 플러그인을 사용하면 redux 코드를 더욱 간결하고 아름답게 만들 수 있습니다. create-react-app을 사용하여 생성된 hello world를 표시할 수 있는 반응 환경이 이미 있고 redux를 설치했다고 가정합니다.

참고: create-react-app을 사용하여 방금 생성한 경우 npm run Eject를 실행하여 개인 설정을 팝업으로 표시해야 구성을 사용자 정의할 수 있습니다.

Install

npm i react-redux --save

Use

react-redux는 두 가지 중요한 인터페이스인 Provider와 연결을 제공합니다. 이 플러그인을 사용하면 React-redux를 구독하고 전달하는 것을 잊어버릴 수 있으며 더 이상 필요하지 않습니다. .

코드 구조

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { reducer } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer, applyMiddleware(thunk));
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

Provider에서 애플리케이션의 가장 바깥쪽 레이어에 저장소를 전달하고 이번에만 사용합니다.

//app.js
import React, { Component } from 'react';
import { addCreator, removeCreator, addAsync } from './index.redux';
import { connect } from 'react-redux';
class App extends Component {
 render() {
  return (
   <p className="App">
    <h1>现在有美女{this.props.num}个。</h1>
    <button onClick={this.props.addCreator}>add</button>
    <button onClick={this.props.removeCreator}>remove</button>
    <button onClick={this.props.addAsync}>addAsync</button>
   </p >
  );
 }
}
//定义把state中哪个属性放到props中
 function mapStateToProps(state) {
  return { num: state }
 }
 //定义把哪些方法放到props中
 const actionCreators={ addCreator, removeCreator, addAsync };
 //connect其实就是一个高阶组件，把app传进去，返回一个新的app组件
 App = connect(mapStateToProps, actionCreators)(App);
export default App;

connect는 구성 요소에 필요한 매개변수를 외부에서 가져오는 역할을 담당합니다. connect를 통해 정의한 후 props에 배치된 속성과 메소드를 this.props를 통해 직접 얻을 수 있습니다.

리듀서의 정의는 다음과 같습니다.

//react.redux.js
const Add = 'addGirl', Remove = "removeGirl";
export function reducer(state = 0, action) {
  switch (action.type) {
    case Add:
      return state + 1;
    case Remove:
      return state - 1;
    default:
      return 10;
  }
}
export function addCreator() {
  return { type: Add };
}
export function removeCreator() {
  return { type: Remove };
}
export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

데코레이터를 사용하여 Conect를 더욱 우아하게 작성하세요

먼저 babel-plugin-transform- decorators-legacy를 설치하고 package.json에서 구성해야 합니다.

Installation

npm i babel-plugin-transform- decorators-legacy --save-dev 이것은 개발용이므로 --save-dev

Configuration

에 설치하세요. babel의 플러그인 속성을 구성하세요

 "babel": {
  "presets": [
   "react-app"
  ],
  "plugins": [
   ["transform-decorators-legacy"]
  ]
 }

원래 작성 방법 수정
@connect를 사용하여 재정의하고 클래스 위에 작성하세요.

//App.js
@connect((state) => ({ num: state }),{ addCreator, removeCreator, addAsync })
class App extends Component {
.....//省略
// function mapStateToProps(state) {
//  return { num: state }
// }
// App = connect(mapStateToProps, { addCreator, removeCreator, addAsync })(App);

VS Code 데코레이터 프롬프트 "experimentalDecorators"에 대한 솔루션

Visual Studio Code 왼쪽 하단에 있는 구성 버튼(또는 파일>기본 설정>구성, Windows 환경)을 클릭하고 사용자 설정 창을 열고 검색하세요. 검색 상자에 "experimentalDecorators"를 입력하면 다음과 같은 옵션을 찾을 수 있습니다.

"javascript.implicitProjectConfig.experimentalDecorators": false

true로 변경하세요.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!