간단한 REDUX의 사용

돌아 오는

배운 나는 반응 3 회 총 프로젝트 반응 쓴 이후
처음 학생 선택 과목 시스템을 완전히 수명주기의 법과 질서를 모르는 ,하지만 결국 Axios의이 요청하는 더 나은 순서로 배치 할 위치를 알 수없는 파일을 노동의 명확한 구분하지 않습니다 완벽하게 잘못된 위치보다 위치, 혼돈의 상태를 통해 장점의 구성 요소를 반영하지 않습니다.
두 번째는이다 두 선거 제도의 교사 구성 요소의 많은 시간 이유로 인해, 방법은 JS 파일에 쌓여있다, 하나의 파일이 너무 비 대한, 그리고 대부분의 방법은 복사하는 방법입니다. 장점은 명확하게 건조 물질의 각각의 라이프 사이클이며, 시스템이 느리게 확장 할 때 이해, 서서히 커지고, 국가 일반적인 결함 렌더링 인터페이스는 점차적으로 거의 모든 버그의 근본 원인의 상태 관리에서 노출됩니다 부서 :

첫째, 어려움을 해결 : 문제가있을 때, 잘못된 위치, 중첩 된 구성 요소가 오류 오류가 결국 모르는 요소 시간에 전달, 또는 하위 어셈블리의 라이프 사이클에 표시를 찾을 수 어렵습니다.

둘째, 너무 많은 중첩 된 상태는 손실에 혼돈의 데이터 로직 개발자를 할 수 있습니다.

데이터를 저장하는 단일 상태 저장소 (저장)을 사용하여 이렇게 태어난 기술 REDUX, 데이터 만 동작 (액션)에 의해 변형 될 수있어서, 상기 데이터 만 판독 될 수 있도록 수정 될 수 없다 같은 위치에 데이터를 수정하는 개발자들은 각각의 상황은 라이프 사이클 데이터 요청 코드가 표시 한 무리가되지 않습니다.

세 번째는 제가 쓰고 있어요입니다 레스토랑 관리 시스템 , 새로운 기술의 사용이있다 REDUX 사용하기 전에 얼마나 많은 문제가 무엇인가를 생각은? 내가 setState를 직접, 상태를 저장하기 만 창고가있는 것처럼 수정뿐만 아니라 행동을 통해,하지, 각 인터페이스는 상태는 당신이하지 내가 할입니까? 그러나 사용은 찾을 수 후 돌아 오는 많은 교정 도구처럼 당신이 개별 데이터가 단일 위치로 흐르고, 만 창고에서 데이터를 검색 할 수 있도록 할 수 있습니다 . REDUX 아래에있는 내 예제와 같이 코드에서 데이터를 수정

1 개 CONST 조치 = changeHeadColor (인덱스);
2 store.dispatch (작용);

changeHeadColor이 방법은 개체를 반환, 객체 메소드의 이름 또는 데이터웨어 하우스를 수정할 키로 볼 수있는 유형 특성이 있어야합니다, 당신은 문을 열려면이 키가 필요합니다.

1 수출 CONST changeHeadColor = (인덱스) => ({
 2      유형 : CHANGE_HEAD_COLOR,
 3      인덱스
 4 })

그리고 우리의 창고이며, 우리는이 파일을 저장하기 위해 최선을 다하고 있습니다 상태 . 그래서 우리는 수정 된 상태 의 방법은 호출하여, 매우 분명하다 액션 , 해당 찾아 (동작) 감속기 이 순수 기능에 의해 수정 (창고 운영의 방법), 상태 , 단지 우리가 변경할 수있는이 방법으로 상태를

CONST defaultState = { 
    headActiveColorIndex : 0 
}; 
수출 기본 (상태 = defaultState, 액션) => { 
    newState하자; 
    스위치 (action.type) {
         케이스 CHANGE_HEAD_COLOR : 
            newState = JSON.parse (JSON.stringify (주)); // 深度拷贝 
            newState.headActiveColorIndex = action.index;
            반환 newState을; 
    } 
    리턴 상태; 
}

다음 문서는 내가 무엇을 보여줄 사전을 만들어야합니다. 아마 필요한 파일 넷 플러스, 구성 요소 파일의 사용.

store.js

// 기억 설치 REDUX의 REDUX-썽크 (미들웨어 나중에 말한다) 
오기 {createstore, applyMiddleware, 작성} REDUX '에서 , 
가져 오기 감속기에서 './reducer ' 
썽크 가져 오기 'REDUX-썽크 ' // 확장 함수 상기 방법 단계는 두 가지 기능을 수행 
CONST = composeEnhancers 창 .__ REDUX_DEVTOOLS_EXTENSION_COMPOSE__? 
    창 .__ REDUX_DEVTOOLS_EXTENSION_COMPOSE의 __는 ({}) 작성; // 미들웨어 
CONST = 향상제 composeEnhancers (applyMiddleware (썽크)); 
CONST 스토어 = createstore ( 
    감속기, / * preloadedState, * / 
    인핸서 
), 
수출의 기본 저장;

actionType.js

// typeheaction 자체의 동작을 정의하는 파일의 이름을 분리,이의 예상치 못한 이점은 잘못된 유형의 이름을 입력 할 때 오류가 아니라이 문서를 작성하는 것보다, 발생한다는 것입니다, 다음, 감속기 교육부는 판단 조건 등이 변수가 배치되었으며, 불평하지 않고있는 파일 형식을 결정합니다. 당신의 호의 버그에서 처리 오류 
// 상단 네비게이션 바의 배경 색상 변경 
수출 CONST CHANGE_HEAD_COLOR = 'changeHeadColor을';

actionCreators.js

'./actionTypes'에서 가져 오기 {CHANGE_HEAD_COLOR} 
 
 수출 CONST changeHeadColor = (인덱스) => ({
      유형 : CHANGE_HEAD_COLOR,
      인덱스
 })

reducer.js

'./actionTypes'가져 오기 CHANGE_HEAD_COLOR {} 

CONST defaultState = { 
    : headActiveColorIndex 0 , 
    tableList [] 
}; 

수출 기본 (상태 = defaultState, 액션) => { 
    newState하자; 
    스위치 (action.type) {
         케이스 CHANGE_HEAD_COLOR : 
            newState = JSON.parse (JSON.stringify (주)); // 深度拷贝 
            newState.headActiveColorIndex = action.index;
            반환 newState을; 
    } 
    리턴 상태; 
}

head.js => 요소 파일

가져 오기가 '반응'에서 {구성 요소}, 반작용 
에서 가져 가게 '../store' 
에서 가져 오기 {changeHeadColor} '../store/actionCreators' 


클래스 헤드 구성 요소 {확장 
    생성자 (소품) { 
        슈퍼 (소품); 
        이 .STATE = store.getState ()
         // 订阅发生改变就修改视图 
        store.subscribe ( 이 .storeChange.bind ( 이 )); 
    } 
    componentDidMount () { 
        const를 행동 = changeHeadColor (10 ) 
        store.dispatch은 (행동이) 
    } 
    렌더링 () { 
        {headActiveColorIndex하자} = 이.상태;
        창 (
             <div 클래스 이름 = "헤드"> 
                {headActiveColorIndex}
             </ div> 
            <div의 onclick = { 이 .testFun.bind ( 이 )}>测试</ div>
         ) 
    } 
    testFun () { 
        CONST 조치 = changeHeadColor (1000 ) 
        store.dispatch (행동) 
    } 
    storeChange () { 
        이 .setState (store.getState ()) 
    } 
} 

수출 기본 헤드

파일 구조는 우리가 사용하는 경우, 다음과 그들의 무거운 비트 경로 경로에 따라 권장 사항을 다음 저장 폴더, 파일 이름을 변경이 되었기 때문에, 예를 들어, 내가 그렇게하는 index.js를 store.js 여기에 배치했다

그럼 당신은 당신이 믿지 않는 나 자신의 인식하지 않는 경우, 그 당신을 생각 나게하는 다음 프로젝트를 수행하는 REDUX를 사용하려고 할 수 있습니다 혼란 프로젝트 관리 반응 , REDUX 경우 사용할 필요가 없습니다 합니다.

다음은 기사 인용 루안 이풍 선생님의 말씀입니다 :

　　　　 "당신이 모르는 경우 돌아 오는 여부, 그게 필요하지 않습니다."

여기에 오늘, 문제의 길이 주어진 다른 문제가있는 경우 더, 당신은 나에게 내 QQ 또는 개인 편지를 추가하거나 정보, 내가 그들을 답변을 위해 최선을 saw'll을 남길 수 있습니다 넣을 수있는 방법은 없습니다. 나는 당신이 약간의 버그를 희망 프로젝트! 다음 업데이트 안녕.

간단한 REDUX의 사용

추천