처음부터 반응+리덕스

이번에는 React+redux를 처음부터 가지고 가겠습니다. React+redux를 처음부터 시작할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다.

환경 준비

여기에서는 편의상 create-react-app을 사용하여 반응 환경을 구축합니다.

create-react-app mydemo

팝업 구성

반응 구성을 사용자 정의해야 하는 경우 다음 명령을 실행하여 구성 파일을 팝업합니다.

npm run eject

redux 설치

npm i redux --save

이해하기 쉽습니다

redux의 간단한 사용법은 구독하고 스토어를 통해 정보를 게시하는 것입니다.

구독을 통해 액션을 구독하고 파견을 통해 액션을 유발하세요. 리듀서는 각 작업이 수행해야 하는 작업을 정의합니다.

데모 코드

리듀서 정의

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;
  }
}
//action creator,把action封装成一个方法，这样用的时候不用每次定义，避免出错
export function addCreator() {
  return { type: Add };
}
export function removeCreator() {
  return { type: Remove };
}
export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

항목 파일 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';
import thunk from 'redux-thunk';
import { reducer,addCreator,removeCreaator } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer);
function render() {
  ReactDOM.render(
    <App store={store} addCreator={addCreator} removeCreator={removeCreator} />,
    document.getElementById('root')
  );
}
//封装成方法，方便下面的store的订阅调用
render();
//每当dispatch时，订阅的函数就会执行
store.subscribe(render);
registerServiceWorker();

App.js

import React, { Component } from 'react';
import './App.css';
class App extends Component {
 render() {
  var store=this.props.store;
  var num=store.getState();
  return (
   <p className="App">
    <h1>现在有机关枪{this.props.num}把。</h1>
    <button onClick={() => { store.dispatch(this.props.addCreator()) }}>add</button>
    <button onClick={() => { store.dispatch(this.props.removeCreator()) }}>remove</button>
   </p >
  );
 }
}
export default App;

스토어 디스패치를 ​​통해 액션을 트리거하고, index.js에 구독된 이벤트가 실행됩니다.

redux의 비동기 실행

redux에서 비동기 작업을 수행해야 한다면 React-thunk 플러그인을 설치해야 합니다

npm i react-thunk --save

동시에 Redux 플러그인의 applyMiddleware도 필요합니다

Key code

설정은 사실 매우 간단합니다. 스토어 생성시 썽크만 전달하면 됩니다.

import thunk from 'redux-thunk';
const store = createStore(reducer, applyMiddleware(thunk));

app.js에서 비동기 작업을 트리거하는 버튼을 추가하세요. 리듀서에 비동기 메서드가 정의되어 있습니다.

export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

메서드를 비동기적으로 호출하면 두 개의 매개 변수가 있는 메서드가 반환됩니다. 두 매개 변수는 모두 함수이고 첫 번째는 디스패치 함수이고 두 번째는 getState 함수입니다.
dispatch는 작업을 트리거하고 getState는 상태 값을 가져옵니다.

app.js에 코드 추가

<button onClick={() => { store.dispatch(this.props.addAsync()) }}>addAsync</button>

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

추천 도서:

React diff 알고리즘 사용 방법

vue 프로젝트 API 인터페이스 관리 방법

위 내용은 처음부터 반응+리덕스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!