React 앱에 Redx를 언제 추가해야 합니까?

React 앱에 Redx를 언제 추가해야 합니까?

저는 현재 React를 배우고 있으며, 모바일 앱 구축 시 Redux와 함께 사용하는 방법을 찾고 있습니다.그 두 가지가 어떻게 관련되어 있는지/사용할 수 있는지 좀 헷갈리네요.예를 들어, 저는 React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript,에서 이 튜토리얼을 완료했습니다만, 지금 이 앱에 리덕터/액션을 추가하는 것을 검토하고 있습니다.이러한 튜토리얼이 이미 실행한 것과 어떤 관계가 있는지 잘 모르겠습니다.

React는 일부 컴포넌트에 의해 "소유"된 상태로 기술되는 "진실의 출처"에 따라 UI 업데이트를 처리하는 UI 프레임워크입니다.Thinking in React는 리액트 상태의 소유권 개념을 매우 잘 설명하고 있으며, 이 개념을 검토해 볼 것을 강력히 권장합니다.

이 상태 소유권 모델은 상태가 계층적이고 구성 요소 구조와 어느 정도 일치할 때 잘 작동합니다.이렇게 하면 상태가 여러 컴포넌트로 "분산"되어 앱을 쉽게 이해할 수 있습니다.

그러나 가져온 데이터를 캐시하고 동시에 어디에서나 일관되게 업데이트하려는 경우처럼 앱의 원격 부분이 동일한 상태에 액세스하기를 원할 수 있습니다.이 경우 React 모델을 따르면 컴포넌트리의 맨 위에 매우 큰 컴포넌트가 여러 개 있습니다.이러한 컴포넌트는 사용하지 않는 중간 컴포넌트를 통과합니다.데이터에 관심을 갖는 리프 컴포넌트에 도달합니다.

이러한 상황에 처했을 때는 Redux를 사용하여 이 상태 관리 로직을 최상위 컴포넌트에서 "reducers"라고 불리는 개별 기능으로 "추출"할 수 있습니다.또, 그 상태에 관심을 가지는 리프 컴포넌트를 애플리케이션 전체에 전달하는 것이 아니라, 직접 "연결"할 수도 있습니다.아직 이 문제가 없다면 Redux가 필요하지 않을 수 있습니다.

마지막으로 Redx는 이 문제에 대한 최종 솔루션이 아닙니다.React 구성 요소 이외의 로컬 상태를 관리할 수 있는 방법은 여러 가지가 있습니다. 예를 들어, Redux를 좋아하지 않는 일부 사용자는 MobX에 만족합니다.먼저 React 상태 모델을 확실히 이해하고, 그 후 여러 솔루션을 독립적으로 평가하여 작은 앱을 구축하여 장단점을 파악해 보시기 바랍니다.

(이 답변은 Pete Hunt의 리액트 하우투 가이드에서 영감을 얻은 것입니다.여러분도 읽어보시기 바랍니다.)

애플리케이션/스택에 Redux를 추가하는 이상적인 방법은 고객/앱/팀이 문제를 해결할 때까지 기다리는 것입니다.긴 사슬을 보기 시작하면props컴포넌트의 여러 레벨에 걸쳐 구축 및 전달되거나 복잡한 상태 조작/판독을 조정하고 있는 자신을 발견하는 것은 어플리케이션이 Redux 등을 도입함으로써 이점을 얻을 수 있다는 신호일 수 있습니다.

"Just React"로 이미 구축한 앱을 사용하여 Redx가 어떻게 적합한지 확인할 것을 권장합니다.상태 또는 일련의 '액션'을 한 번에 하나씩 선택하여 우아하게 도입할 수 있는지 확인합니다.앱의 대폭적인 개서에 집착하지 않고 리팩터링.아직 어디서 가치를 창출할 수 있는지 모르겠다면, 이는 앱이 React 위에 Redx와 같은 기능을 탑재할 만큼 크거나 복잡하지 않다는 신호일 수 있습니다.

아직 Dan(위의 답변)은 Redx에 대해 보다 기본적인 수준으로 설명하는 훌륭한 단편 비디오 시리즈를 가지고 있습니다.저는 https://egghead.io/series/getting-started-with-redux을 통해 그 일부를 흡수하는 시간을 가질 것을 강력히 권장합니다.

레독스도 꽤 훌륭한 문서를 가지고 있습니다.특히 http://redux.js.org/docs/introduction/ThreePrinciples.html 등 '왜'를 많이 설명하고 있다.

저는 Redux를 이해하기 위해 이 문서를 준비했습니다.이것으로 의심이 풀리길 바랍니다.

---------------------------------------------------------------

ACTIONS:Actions는 응용 프로그램에서 저장소로 데이터를 전송하는 정보의 페이로드입니다.상점에서 정보를 얻을 수 있는 유일한 원천이다.송신할 수 있는 것은 store.dispatch() 뿐입니다.

   Example-
const  ADD_TODO = 'ADD_TODO'

{
   type:ADD_TODO,
   text: 'Build my first redux app'
}

액션은 플레인 javascript 객체입니다.작업에는 수행 중인 작업 유형을 나타내는 [type] 속성이 있어야 합니다.유형은 문자열 상수로 정의해야 합니다.

Action CREAToRS------------------------------------------------------------------------------------------------------------------------------------------------------redex 동작에서 작성자는 동작을 반환합니다.

function addToDo(text) {
   return {
    type: ADD_TODO,
    text    
   }
}

디스패치를 초기화하려면 dispatch() 함수에 결과를 전달합니다.

1. 디스패치(add ToDo(텍스트)),
2. 디스패치(complete ToDo(인덱스))

또는 자동으로 디스패치하는 바인딩된 작업 생성자를 생성할 수 있습니다.

cosnt boundAddTodO = text => dispatch(addToDo(text));

이제 직접 호출할 수 있습니다.

boundaddTodO(text);

dispatch() 함수는 store.dispatch()에서 직접 액세스할 수 있지만 helper connect() 메서드를 사용하여 액세스합니다.

Actions.js..................

액션..........

exports cosnt ADD_TODO = 'ADD_TODO';
exports cosnt TOGGLE_TODO = 'TOGGLE_TODO'

작업 작성자

내보내기 함수 addToDO(텍스트){ 반환 { type: ADD_TODO, text } }

---

.........................리듀서 ................................

감소기는 저장소로 전송되는 작업에 대한 응답으로 응용 프로그램이 변경 사항을 나타내는 방법을 지정합니다.

상태 쉐이프 설계

redux에서는 모든 애플리케이션 상태가 단일 객체에 저장됩니다.상태뿐만 아니라 데이터도 저장해야 합니다.

{visibilityFilter: 'SHOW_ALL', todos: [ { text: 'rex 사용 고려', 완료: true}, { text: '단일 트리의 모든 상태 확인 } ] } }

처리 액션 --------------------------------------------------------------------------------------------------------------------------

(이전 상태, 액션) => newState

초기 상태를 지정하는 것부터 시작하겠습니다.Redux가 처음으로 상태를 알 수 없는 리듀서를 호출합니다.앱 상태를 되돌릴 수 있는 기회입니다.

import  { visiblilityFilters } from './actions';
const initialState = {
    visibilityFilter: VisibilityFilters.SHOW_ALL,
    todo: []
}

function todoApp(state, action){
    if(typeof state == 'undefined'){
        return initialState;
    }

    // dont handle other cases as of now.
    return state;
}

JS를 처리하는 ES6 방법을 사용하여 동일한 작업을 수행할 수 있습니다.

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

---

............................................................................

그 가게는 그들을 하나로 묶는 물건이다.그 가게는 다음과 같은 책임이 있다

1. 응용 프로그램 상태 유지
2. getState() 경유로 스테이트에의 액세스를 허가합니다.
3. dispatch()를 통해 상태 업데이트 허용
4. 가입자(청취자)를 통한 청취자 등록

주의: combineReducers()를 사용하여 여러 개의 리듀서를 하나로 결합합니다.

const store = createStore(todoapp); // todoapp은 리듀서입니다.

레독스는 이렇게 작동합니다.작업은 컴포넌트 또는 뷰에서 디스패치됩니다.액션에는 "type" 속성이 있어야 하며 발생한 액션 정보를 저장하는 모든 속성이 될 수 있습니다.동작 중인 데이터는 서로 다른 리덕터에 관련될 수 있으므로 동일한 개체가 서로 다른 리덕터에 전달됩니다.각 환원제는 부품/기여를 스테이트로 추출/작성합니다.그런 다음 출력이 Marge되고 새로운 상태가 형성되며 상태 변경 이벤트에 가입해야 하는 컴포넌트가 통지됩니다.

위의 예에서 갈색은 3가지 성분 RGB를 모두 갖습니다.각 환원제는 동일한 갈색으로 구분됩니다.

, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, 하다Redux필요 없는 경우 응용 프로그램을 사용할 수 있습니다.심플하기 때문에, 전혀 필요 없는 경우는, 억지로 프로젝트에 포함시키지 말아 주세요.리덕스 대규모 애플리케이션에서 매우 유용하기 때문에 계속 읽어보십시오.

프로그램의 입니다. React를 생각해 .Redux로컬 스토어처럼 당신의 상태를 추적하면 원하는 페이지와 경로로 접속할 수 있습니다.또한 플럭스와 비교해도 스토어는 1개뿐이며, 진실의 원천을 의미합니다.

이 이미지를 통해 Redx의 첫 번째 기능을 한 눈에 파악할 수 있습니다.

또한 Redx는 다음과 같이 소개했습니다.

Redx는 JavaScript 앱을 위한 예측 가능한 상태 컨테이너입니다.

일관된 동작, 다양한 환경(클라이언트, 서버 및 네이티브)에서 실행, 테스트하기 쉬운 애플리케이션을 작성할 수 있습니다.게다가 라이브 코드 편집과 타임 트래블 디버거를 조합하는 등, 뛰어난 개발자 체험을 제공합니다.

React 또는 다른 뷰 라이브러리와 함께 Redx를 사용할 수 있습니다.매우 작다(2kB, 의존관계 포함).

으로는 ,, 명, 음, 음, 음의 3원칙이 .Redux음음음같 뭇매하다

1. 하나의 진실원

2. 읽기 전용 상태

3. 순기능으로 변경한다

즉, 기본적으로 어플리케이션 내에서 마음에 드는 것을 추적하기 위해 하나의 스토어가 필요한 경우 Redux는 편리하며 앱 내 어디에서나 어떤 경로로든 액세스할 수 있습니다.간단히 말해서store.getState();

또한 미들웨어 Redx를 사용하면 상태를 보다 효율적으로 관리할 수 있습니다.Redx 공식 페이지에 편리한 컴포넌트와 미들웨어 목록이 있습니다.

단순히 애플리케이션이 크고 많은 컴포넌트, 상태 및 라우팅이 있는 경우 처음부터 Redux를 구현하려고 합니다.가는 길에 확실히 도움이 될 거야!

우리는 신청서를 작성할 때 애플리케이션 상태를 관리해야 합니다.React는 컴포넌트 간에 상태를 공유해야 할 경우 소품 또는 콜백을 사용할 수 있는 컴포넌트 내에서 로컬로 상태를 관리합니다.

그러나 애플리케이션이 증가함에 따라 상태 및 상태 변환을 관리하는 것이 어려워집니다.응용 프로그램을 디버깅하려면 상태 및 상태 변환을 적절하게 추적해야 합니다.

Redx는 상태 및 상태 변환을 관리하는 JavaScript 애플리케이션용 예측 가능한 상태 컨테이너이며 React와 함께 자주 사용됩니다.

리덕스의 개념은 다음 이미지로 설명할 수 있습니다.

사용자가 컴포넌트와 상호작용하여 액션을 저장하고 있을 때 사용자가 액션을 트리거하면 스토어의 리듀서는 액션을 받아들여 어플리케이션의 상태를 갱신하고 스토어에 업데이트가 있을 때 어플리케이션 전체의 불변 글로벌 변수에 저장됩니다.상태로 서브스크라이브된 대응하는 뷰 컴포넌트는 g입니다.갱신되었습니다.

상태는 글로벌하게 관리되기 때문에 redux를 사용하면 유지보수가 쉬워집니다.

Redux를 사용해 본 결과 개인적으로 컴포넌트에 물체를 전달하는 것이 상태를 유지하는 훨씬 쉬운 방법이라는 것을 알게 되었습니다.다른 컴포넌트를 호출하기 위해 함수를 쉽게 참조할 수 있는 방법은 말할 것도 없습니다.React의 컴포넌트 간에 메시지를 주고받는 번거로운 문제를 많이 해결할 수 있기 때문에 2대 1입니다.

언급URL : https://stackoverflow.com/questions/36631761/when-should-i-add-redux-to-a-react-app