Redux 기본 개관

Redux 가 뭐 예요?
상태 관리 에 전념 하 는 라 이브 러 리, react 디 결합, 단일 상태, 단 방향 데이터 흐름
핵심 개념: store, state, action, reducer
Redux 에 게 는 이 세 가지 요소 밖 에 없다.
a. action 은 순수 하고 명확 한 데이터 구조 로 사건 의 모든 요소 만 제공 하고 논 리 를 제공 하지 않 습 니 다.
b. reducer 는 일치 하 는 함수 입 니 다. action 의 전송 은 전체 적 입 니 다. 모든 reducer 는 자신 과 관련 된 여 부 를 포착 하고 일치 할 수 있 습 니 다. 관련 된 것 은 action 중의 요 소 를 가 져 가서 논리 적 으로 처리 하고 store 의 상 태 를 수정 하 며 관련 이 없 으 면 state 를 처리 하지 않 습 니 다.
c. store 는 저장 상 태 를 책임 지고 react api 에 의 해 리 셋 되 고 action 을 발표 할 수 있 습 니 다.
발췌: Wang Namelos  https://www.zhihu.com/question/41312576/answer/90782136
다음은 실전 작업 을 시작 하 겠 습 니 다. 하 나 를 더 하고 하 나 를 줄 이 는 작업 을 완성 합 니 다. state 는 숫자 이 고 action. type 은 작업 의 유형 입 니 다. reducer 는 구체 적 인 작업 을 완성 합 니 다. store 는 state 를 저장 하고 action 을 발표 합 니 다.
우선, createStore 를 통 해 store 를 새로 만 들 려 면 reducer (우리 의 reducer 예) 를 준비 해 야 합 니 다.  counter 는 책임 + 1 - 1)

import {createStore} from 'redux'
// 1.   store
//   reducer  
//     state action      state
function counter(state=0 , action) {
    switch (action.type){
        case 'addition':
            return state + 1;
        case 'subtraction':
            return state - 1;
        default:
            return 10;
    }
}
//   store,      reducer       createStore
const store = createStore(counter);

그리고 지금 store 에 있 는 state 를 인쇄 해 보 겠 습 니 다.

const init = store.getState();
console.log(init);   // 10

다음은 사건 을 보 내 고 action 을 전달 하 며 action 의 type 을 통 해 명중 reducer 의 어떤 동작 을 판단 할 수 있 습 니 다.

//        action
store.dispatch({type: 'addition'});
console.log(store.getState());                  // 11
store.dispatch({type: 'addition'});
console.log(store.getState());                  // 12
store.dispatch({type: 'subtraction'});
console.log(store.getState());                  // 11

매번 명중 할 때마다 한 번 씩 인쇄 해 야 하기 때문에 매우 번거롭다.저희 가 감청 을 추가 할 수 있어 요.

function listener() {
    const current = store.getState();
    console.log(`      ${current}`);
}

//   
store.subscribe(listener);
store.dispatch({type: 'addition'});         //        11
store.dispatch({type: 'addition'});         //        12
store.dispatch({type: 'subtraction'});      //        11

이러 면 매번 콘 솔 안 해도 돼.
redux 의 기본 용법 은 바로 이 렇 습 니 다. 더 높 은 용법 은 앞으로 의 글 에서 공유 할 것 입 니 다.