react+redux 를 사용 하여 카운터 기능 및 문제 발생
Redux
recat 에서 redux 를 사용 하지 않 을 때 발생 하 는 문제
react 에서 구성 요소 통신 의 데 이 터 는 단 방향 입 니 다.최상 위 구성 요 소 는 props 속성 을 통 해 하층부 구성 요소 에 데 이 터 를 전달 할 수 있 습 니 다.하층부 구성 요 소 는 상층 부 구성 요소 에 데 이 터 를 전달 할 수 없습니다.하층부 구성 요소 가 데 이 터 를 수정 하려 면 상층 부 에서 데 이 터 를 수정 하 는 방법 을 하층부 구성 요소 로 전달 해 야 합 니 다.프로젝트 가 갈수 록 구성 요소 간 에 데 이 터 를 전달 하 는 것 이 점점 어려워 집 니 다.
react 에 redux 를 넣 으 면 좋 은 점
redux 관리 데 이 터 를 사용 합 니 다.Store 는 구성 요소 에 독립 되 어 데이터 관 리 를 구성 요소 에 독립 시 켜 구성 요소 간 에 데 이 터 를 전달 하 는 데 어려움 을 해결 합 니 다.
redux 사용 하기
다운로드 redux
npm install redux react-redux
react+redux 를 사용 하여 계수 기 를 실현 합 니 다.
1.프로젝트 를 만 들 고 redux 를 설치 합 니 다.
# react reate
npm install -g create-react-app
# reate
create-react-app
#
cd
# redux
npm install redux reate-redux
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore } from 'redux';
const initialState = {
count: 0
}
function reducer(state = initialState, action) {
switch (action.type) {
case 'increment':
return {
count: state.count + 1
}
case 'decrement':
return {
count: state.count - 1
}
default:
return state
}
}
const store = createStore(reducer)
const increment = {
type: 'increment'
}
const decrement = {
type: 'decrement'
}
function Count() {
return <div>
<button onClick={() => store.dispatch(increment)}>+</button>
<span>{store.getState().count}</span>
<button onClick={() => store.dispatch(decrement)}>-</button>
</div>
}
store.subscribe( () => {
console.log(store.getState())
ReactDOM.render(
<React.StrictMode>
<Count />
</React.StrictMode>,
document.getElementById('root')
);
})
ReactDOM.render(
<React.StrictMode>
<Count />
</React.StrictMode>,
document.getElementById('root')
);카운터 사례 코드 최적화-store 전역 접근 가능
Store 에서 문 제 를 해결 하기 위해 서 는 react-redux 를 사용 하여 이 문 제 를 해결 해 야 합 니 다.react-redux 는 Provider 구성 요소 와 connect 방법 을 제공 합 니 다.
구성 요소 제공
구성 요소 입 니 다.만 든 store 는 전역 적 인 곳 에 두 고 구성 요소 가 store 를 가 져 올 수 있 도록 합 니 다.provider 구성 요 소 를 통 해 store 를 전역 적 인 구성 요소 가 닿 을 수 있 는 곳 에 두 었 습 니 다.provider 는 최상 위 구성 요소 에 두 라 고 요구 합 니 다.
connect
connect 는 store 의 상 태 를 구독 하 는 데 도움 을 줍 니 다.상태 가 바 뀌 면 구성 요 소 를 다시 렌 더 링 하 는 데 도움 을 줍 니 다.
connect 방법 을 통 해 store 의 상 태 를 가 져 와 store 의 상 태 를 props 에 투사 할 수 있 습 니 다.
connect 방법 으로 dispatch 방법 을 얻 을 수 있 습 니 다.
connect 의 매개 변 수 는 함수 입 니 다.이 함수 가 store 의 상 태 를 가 져 올 수 있 습 니 다.이 함수 가 대상 으로 돌아 가 야 합 니 다.이 대상 에 쓴 내용 은 구성 요소 의 props 속성 에 매 핑 됩 니 다.
connect 호출 후 함수 가 되 돌아 오 는 이 함 수 를 계속 호출 하려 면 connect 에 매 핑 해 야 하 는 props 를 알려 야 합 니 다.
새 Component 폴 더,Count.js 파일 생 성
import React from 'react'
function Count() {
return <div>
<button onClick={() => store.dispatch(increment)}>+</button>
<span>{store.getState().count}</span>
<button onClick={() => store.dispatch(decrement)}>-</button>
</div>
}
export default Count
ReactDOM.render(
// provider store provider
<Provider store={store}><Count /></Provider>,
document.getElementById('root')
);
const mapStateProps = state => ({
count: state.count,
a: '1'
})
// connect store ， ， props
// connect connect props
export default connect(mapStateProps)(Count)
const increment = {
type: 'increment'
}
const decrement = {
type: 'decrement'
}
function Count({count,dispatch}) {
return <div>
<button onClick={() => {dispatch(increment)}}>+</button>
<span>{count}</span>
<button onClick={() => {dispatch(decrement)}}>-</button>
</div>
}카운터 사례 코드 최적화-보기 의 코드 가 독성 을 높 입 니 다.
우 리 는 보기에 서 함 수 를 직접 호출 하 기 를 원 합 니 다.이렇게 보기 코드 는 가 독성 이 강 합 니 다.이것 은 connect 의 두 번 째 매개 변 수 를 이용 해 야 합 니 다.두 번 째 매개 변 수 는 함수 입 니 다.이 함수 의 형 삼 은 dispatch 방법 입 니 다.이 함수 에 게 대상 을 되 돌려 달라 고 요구 합 니 다.돌아 오 는 이 대상 의 내용 은 구성 요소 의 props 속성 에 반 영 됩 니 다.
하나의 변 수 를 connect 의 두 번 째 매개 변수 로 설명 하고 이 변수 에서 서로 다른 action 작업 을 수행 하 는 대상 을 되 돌려 줍 니 다.
// connect dispatch props
const mapDispatchToProps = dispatch => ({
increment (){
dispatch({
type: 'increment'
})
},
decrement (){
dispatch({
type: 'decrement'
})
}
})
// connect store ， ， props
// connect connect props
export default connect(mapStateProps, mapDispatchToProps)(Count)
function Count({count,increment,decrement}) {
return <div>
<button onClick={increment}>+</button>
<span>{count}</span>
<button onClick={decrement}>-</button>
</div>
}dispatch 트리거 action 방법 을 최적화 하 는 중복 코드 간소화
bindActionCreators 를 이용 하여 dispatch 가 action 을 촉발 하 는 동작 을 간소화 합 니 다.bindActionCreators 는 action 동작 을 수행 하 는 함 수 를 생 성 하 는 데 도움 을 줍 니 다.
bindAction Creators 는 두 개의 매개 변수 가 있 습 니 다.첫 번 째 매개 변 수 는 action 을 실행 하 는 대상 이 고 두 번 째 매개 변 수 는 dispatch 방법 입 니 다.
action 작업 을 분리 합 니 다.새 store/actions/conter.actions.js 파일 은 action 작업 을 이 파일 에 따로 두 고 내 보 냅 니 다.
export const increment = () => ({type: 'increment'})
export const decrement = () => ({type: 'decrement'})
import { bindActionCreators } from 'redux'
import * as counterActions from './../store/actions/counter.actions'
const mapDispatchToProps = dispatch => (bindActionCreators(counterActions, dispatch))
// connect store ， ， props
// connect connect props
export default connect(mapStateProps, mapDispatchToProps)(Count)계수 기 를 재 구성 하여 redux 관련 코드 를 분리 합 니 다.
reducer 함 수 를 단독 파일 로 추출 하고 store 생 성 을 단독 파일 로 추출 합 니 다.
reducer 와 actions 에서 문자열 을 썼 지만 문자열 에 알림 이 없 기 때문에 단어 오류 가 발생 하지 않도록 문자열 을 상수 로 정의 합 니 다.src/store/const/conter.const.js 파일 을 새로 만 듭 니 다.
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
import { INCREMENT, DECREMENT} from './../const/counter.const'
const initialState = {
count: 0
}
// eslint-disable-next-line import/no-anonymous-default-export
export default (state = initialState, action) => {
switch (action.type) {
case INCREMENT:
return {
count: state.count + 1
}
case DECREMENT:
return {
count: state.count - 1
}
default:
return state
}
}
import { INCREMENT, DECREMENT} from './../const/counter.const'
export const increment = () => ({type: INCREMENT})
export const decrement = () => ({type: DECREMENT})
import { createStore } from 'redux';
import reducer from './reducers/counter.reducers'
export const store = createStore(reducer)
import React from 'react';
import ReactDOM from 'react-dom';
import Count from './components/Count';
import { store } from './store'
import { Provider } from 'react-redux'
/**
* react-redux react redux
* Provider store store
* connect
*/
ReactDOM.render(
// provider store provider
<Provider store={store}><Count /></Provider>,
document.getElementById('root')
);
이 계수기 사례 는 버튼 을 누 르 면 1 을 줄 이 는 작업 을 실 현 했 습 니 다.지금 은 새로운 수요 가 있 습 니 다.예 를 들 어 5 를 줄 이 는 것 과 같은 수 치 를 더 줄 여야 합 니 다.
action 에 인 자 를 전달 해 야 합 니 다.
보기 에서 단추 바 인 딩 함수 입력 매개 변수
function Count({count,increment,decrement}) {
return <div>
<button onClick={() => increment(5)}>+</button>
<span>{count}</span>
<button onClick={() => decrement(5)}>-</button>
</div>
}
export const increment = payload => ({type: INCREMENT, payload})
export const decrement = payload => ({type: DECREMENT, payload})
export default (state = initialState, action) => {
switch (action.type) {
case INCREMENT:
return {
count: state.count + action.payload
}
case DECREMENT:
return {
count: state.count - action.payload
}
default:
return state
}
}react 에서 redux 를 사용 하고 카운터 사례 를 실현 하 는 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 react redux 실현 카운터 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
nginx 에서 사이트 아이콘 표시 설정전단 개발 환경: react：^16.4.1 webpack：^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
