이번에는 React-redux 플러그인 사용법과 React-redux 플러그인 사용 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.
react-redux 소개
react-redux는 redux를 사용하여 React를 개발할 때 사용하는 플러그인입니다. 또한, redux는 React의 제품이 아니며, vue 및 Angleredux에서도 사용할 수 있습니다. ; 아래에 간략하게 설명되어 있습니다. React-redux를 사용하여 반응을 개발하는 방법입니다.
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에 배치된 properties 및 method를 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
Vue를 사용하여 양방향 데이터 바인딩을 작성하는 방법
위 내용은 React-redux 플러그인 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!