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

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

---

저는 현재 React를 배우고 있으며 모바일 앱을 구축하기 위해 Redux와 함께 사용하는 방법을 알아 내려고합니다. 나는 두 가지가 어떻게 관련 / 사용 가능한지에 대해 다소 혼란 스럽습니다. 예를 들어 React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript 에서이 튜토리얼을 완료 했지만 이제는 해당 앱에 몇 가지 감속기 / 액션을 추가하는 작업을하고 싶습니다. 나는 그것이 내가 이미 한 일과 관련이 있는지 확실하지 않습니다.

---

React는 일반적으로 일부 구성 요소에 의해 "소유 된"상태로 설명되는 "진실의 소스"에 대한 응답으로 UI 업데이트를 처리하는 UI 프레임 워크입니다. React에서 생각하는 것은 React 상태 소유권 개념을 매우 잘 설명하고 있으며이를 살펴볼 것을 강력히 제안합니다.

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

그러나 때로는 앱의 먼 부분에서 동일한 상태에 액세스하기를 원합니다 (예 : 가져온 데이터를 캐시하고 모든 곳에서 동시에 일관되게 업데이트하려는 경우). 이 경우 React 모델을 따르면 구성 요소 트리의 맨 위에 수많은 소품을 사용하지 않는 중간 구성 요소를 통해 전달하는 매우 큰 구성 요소가 많이 있습니다. 실제로 해당 데이터에 관심이있는 몇 가지 리프 구성 요소에 도달합니다.

이 상황에서 자신을 발견 할 때, 당신은 할 수 있습니다 "추출물" "감속기"라는 별도의 기능으로 최상위 구성 요소에서이 상태 관리 로직 및 "연결"잎 구성 요소에 돌아 오는을 사용 (하지만 필요가 없습니다) 그 전체 앱을 통해 소품을 전달하는 대신 해당 상태를 직접 처리합니다. 아직이 문제가 없다면 Redux가 필요하지 않을 것입니다.

마지막으로 Redux는이 문제에 대한 확실한 해결책이 아닙니다. React 컴포넌트 외부에서 로컬 상태를 관리하는 다른 방법이 많이 있습니다. 예를 들어 Redux를 좋아하지 않는 일부 사람들은 MobX에 만족 합니다. 먼저 React 상태 모델에 대해 확고하게 이해 한 다음 다른 솔루션을 독립적으로 평가하고 작은 앱을 빌드하여 강점과 약점을 파악하는 것이 좋습니다.

(이 답변은 Pete Hunt의 react-howto 가이드에서 영감을 얻었습니다 . 읽어 보시기 바랍니다.)

---

나는 응용 프로그램 / 스택으로 돌아 오는을 추가하기위한 이상적인 경로가 될 때까지 기다려야하는 것으로 나타났습니다 후 당신 / 응용 프로그램 / 팀이 해결되는 고통을 느끼고있다. props여러 수준의 구성 요소를 통해 구축 및 전달되는 긴 체인을보기 시작 하거나 복잡한 상태 조작 / 읽기를 조정하는 자신을 발견하면 앱이 Redux 등을 도입하여 이점을 얻을 수 있다는 신호일 수 있습니다.

"Just React"로 이미 빌드 한 앱을 선택하고 Redux가 어떻게 적용되는지 확인하는 것이 좋습니다. 한 번에 하나의 상태 또는 일련의 "작업"을 뽑아내어 우아하게 도입 할 수 있는지 확인하십시오. 앱의 빅뱅 재 작성에 얽매이지 않고 리팩토링하세요. 가치를 추가 할 수있는 위치를 파악하는 데 여전히 문제가있는 경우 앱이 React 위에 Redux와 같은 이점을 제공 할만큼 크지 않거나 복잡하지 않다는 신호일 수 있습니다.

아직 그것을 보지 못했다면 Dan (위의 답변)은 더 근본적인 수준에서 Redux를 안내하는 훌륭한 짧은 비디오 시리즈를 가지고 있습니다. 나는 그것의 일부를 흡수하는 데 시간을 할애하는 것이 좋습니다 : https://egghead.io/series/getting-started-with-redux

Redux에는 꽤 훌륭한 문서가 있습니다. 특히 http://redux.js.org/docs/introduction/ThreePrinciples.html 과 같은 많은 "이유"를 설명합니다.

---

Redux를 이해하기 위해이 문서를 준비했습니다. 이것이 당신의 의심을 없애기를 바랍니다.

-------------------------- REDUX 튜토리얼 ----------------------

작업-작업은 응용 프로그램에서 저장소로 데이터를 보내는 정보의 페이로드입니다. 그들은 상점에서 유일한 정보 소스입니다. store.dispatch ()를 사용해서 만 보낼 수 있습니다.

   Example-
const  ADD_TODO = 'ADD_TODO'

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

액션은 일반 자바 스크립트 객체입니다. 작업에는 수행중인 작업 유형을 나타내는 [type] 속성이 있어야합니다. 유형은 문자열 상수로 정의되어야합니다.

액션 크리에이터 ----- ---------------- ---- 액션 크리에이터는 바로 액션을 창조하는 기능입니다. 액션과 액션 크리에이터라는 용어를 쉽게 융합 할 수 있습니다. redux 작업에서 작성자는 작업을 반환합니다.

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

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

1. dispatch (addToDo (텍스트));
2. dispatch (completeToDo (인덱스))

또는 자동으로 디스패치하는 바인딩 된 액션 생성자를 만들 수 있습니다.

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

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

boundaddTodO(text);

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

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

행위...........

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

액션 크리에이터

export function addToDO (text) {return {type : ADD_TODO, text}}

---

......................... 감소 기 ........................ ..........

리듀서는 스토어로 전송 된 작업에 대한 응답으로 애플리케이션 상태가 변경되는 방식을 지정합니다.

State Shap 디자인

redux에서 모든 애플리케이션 상태는 단일 객체에 저장됩니다. 일부 데이터와 상태를 저장해야합니다.

{visibilityFilter : 'SHOW_ALL', 할일 : [{text : 'Redux 사용 고려', completed : true}, {text : 'Kepp all the state in single tree'}]}

액션 처리 ---------------- 리듀서는 이전 상태와 액션을 취하고 새로운 상태를 반환하는 순수한 함수입니다.

(previousState, action) => 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. 구독자 (listener)를 통해리스 터너 등록

노트. 여러 감속기를 하나로 결합하려면 combineReducers ()를 사용하십시오.

const 스토어 = createStore (todoapp); // todoapp은 감속기입니다.

---

첫째, 필요하지 않은 Redux경우 애플리케이션 에 추가 할 필요가 없습니다! 간단합니다. 필요하지 않다면 프로젝트에 강제로 포함시키지 마십시오! 그러나 이것이 Redux가 좋지 않다는 것을 의미하지는 않으며 대규모 응용 프로그램에서 실제로 도움이되므로 계속 읽으십시오 ...

Redux는 React 애플리케이션에 대한 상태 관리입니다. 이동하면서 상태 Redux를 추적하는 로컬 저장소와 같이 생각 하면 원하는 모든 페이지와 경로에서 상태에 액세스 할 수 있으며 Flux와 비교하면 하나의 저장소 만 있습니다. 진실의 원천 ...

Redux가 무엇을하는지 한눈에 이해하려면이 이미지를보십시오.

또한 이것이 Redux가 자신을 소개하는 방법입니다.

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

일관되게 작동하고 다양한 환경 (클라이언트, 서버 및 네이티브)에서 실행되며 테스트하기 쉬운 애플리케이션을 작성하는 데 도움이됩니다. 또한 시간 여행 디버거와 결합 된 라이브 코드 편집과 같은 훌륭한 개발자 경험을 제공합니다.

Redux를 React 또는 다른 뷰 라이브러리와 함께 사용할 수 있습니다. 매우 작습니다 (종속성을 포함하여 2kB).

또한 문서에 Redux따라 아래와 같은 세 가지 원칙이 있습니다.

1. 진실의 단일 소스

2. 상태가 읽기 전용입니다.

3. 순수한 기능으로 변경

따라서 기본적으로 응용 프로그램에서 원하는 것을 추적하기 위해 단일 저장소가 필요할 때 Redux가 편리합니다. 앱의 어디에서나 어떤 경로로든 액세스 할 수 있습니다. store.getState();

또한 미들웨어 Redux를 사용하면 상태를 훨씬 더 잘 관리 할 수 ​​있습니다. Redux의 공식 페이지에 편리한 구성 요소 및 미들웨어 목록이 있습니다!

많은 구성 요소, 상태 및 라우팅으로 응용 프로그램이 커질 경우 처음부터 Redux를 구현하십시오! 그것은 확실히 당신을 도울 것입니다!

---

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

그러나 애플리케이션이 성장함에 따라 상태 및 상태 변환을 관리하기가 어려워지고 애플리케이션을 디버그하려면 상태 및 상태 변환을 적절하게 추적해야합니다.

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

redux의 개념은 다음 이미지에서 설명 할 수 있습니다.

When user triggers an action when user interact with the component and an action is dispatched to store then the reducer in the store accepts the action and update the state of the application and stored in the application wide immutable global variable when there is an update in store the corresponding view component subscribed to the state will get updated.

Since state is managed globally and with redux it is easier to maintain.

---

이것이 redux가 작동하는 방식입니다. 모든 구성 요소 또는보기에서 작업이 전달됩니다. 액션은 "유형"속성을 가져야하며 발생한 작업 정보를 보유하는 속성 일 수 있습니다. 실제로 전달 된 데이터는 다른 감속기와 관련 될 수 있으므로 동일한 개체가 다른 감속기에 전달됩니다. 각 감속기는 해당 부분 / 상태에 대한 기여를 취 / 구성합니다. 그런 다음 출력이 병합되고 새로운 상태가 형성되고 상태 변경 이벤트를 구독해야하는 구성 요소가 알림을받습니다.

위의 예에서 갈색은 3 가지 구성 요소 모두 RGB를 갖습니다. 각 감속기는 동일한 갈색을 받고 색상에 대한 기여도를 분리합니다.

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