이번에는 React Redux 사용법과 React Redux 사용 시 주의사항에 대해 알려드리겠습니다.
환경 준비
여기에서는 편의상 create-react-app을 사용하여 React 환경을 구축합니다.
create-react-app mydemo
팝업 구성
React 구성을 맞춤 설정해야 하는 경우 다음을 실행해야 합니다. 구성 파일을 팝업하는 명령입니다.
npm run eject
redux 설치
npm i redux --save
이해하기 쉽습니다
redux의 간단한 사용법은 구독하고 스토어를 통해 정보를 게시하는 것입니다.
구독을 통해 액션을 구독하고 파견을 통해 액션을 유발하세요. 리듀서는 각 작업이 수행해야 하는 작업을 정의합니다.
demo code
reducer 정의
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); } }
entry fileindex.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;
Store Dispatch를 통해 액션을 트리거하고, 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
Vue를 사용하여 양방향 데이터 바인딩을 작성하는 방법
위 내용은 반응 redux를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!