정보실

웹학교

정보실

javascript JavaScript 개발자로 Redux를 배워야 하는 이유

본문

Redux는 한동안 우리와 함께 있었습니다. Dan Abramov가 시간 여행에 대한 악명 높은 이야기에서 시연 한 2015 년 공개 된 내용은 갑자기 많은 JavaScript 개발자의 일상적인 비즈니스로 바뀌었습니다. 특히 React 개발자들은 이 현상에 크게 부딪혔습니다. 모든 사람들이 상태 관리를 다루는 방법에 대한 명확한 경로를 제공했기 때문입니다.


https://www.robinwieruch.de/redux-javascript 


1 년 후, Dan Abramov는 Redux가 처음 성공한 이유를 요약했습니다. 두 가지 이야기는 어떤 기술로 문제를 해결할 수 있는 방법과 이 기술이 결국 지속되는 이유에 대해 매우 통찰력이 있습니다. 많은 JavaScript 라이브러리가 왔다 갔다 왔습니다. 그러나 Redux는 우리와 함께 했습니다.


그러나 나는 하나 이상의 성공적인 라이브러리가 있다고 생각합니다. Redux는 문자 그대로 웹 개발만으로 자랐지만 이전에는 함수 구성이나 불변성에 대해 들어 본 적이 없는 JavaScript 커뮤니티의 많은 사람들에게 전체적인 사고 방식 전환입니다. Redux가 몇 년 더 우리와 함께 있든 다른 상태 관리 라이브러리를 위해 사용하든 현대 웹 응용 프로그램을 개발하는 방법에 큰 유산을 남깁니다.


모든 것에는 분명한 목적이 있습니다 


누군가 Redux에 대한 짧은 표현을 요청하면 다음과 같습니다.


State => View 


더 자세한 설명이 필요하면 다음으로 확장하십시오.


Action => Reducer(s) => Store => View 


더 많은 컨텍스트가 필요한 경우 반복 루프로 확장 할 수 있습니다.


Action => Reducer(s) => Store => View => User Interaction => Action ... 


이것이 React (View)와 같은 라이브러리와 관련하여 Redux (State)입니다. 체인의 모든 부분에는 작업이 있습니다. 모든 것이 서로 명확하게 분리되어 있으며 더 큰 목표를 달성하기 위한 목적인 상태 관리를 제공합니다.


그러나 너무 많은 사람들이 Redux를 React와 밀접하게 연관 시킵니다. 일단 React를 배우기 시작하면 React와 Redux를 결합하여 올인을 시작합니다. 그러나 간단히 말해, Redux를 고려한다면 간단히 말해 Redux는 그렇게 복잡하지 않습니다. 결국 상태를 유지하는 상태 컨테이너 (객체) 일 뿐입니다. 하나를 가능하게 하는 API

  • 상태를 조작하기 위해
  • 상태를 받기 위해
  • 상태 변화를 들으려면

JS에서 Redux의 모든 부분을 간단히 요약해 봅시다. 이것은 Redux 라이브러리에 전혀 의존하지 않는 두 가지 Redux 동작에 작용하는 Redux Reducer입니다.


function reducer(state, action) {
switch(action.type) {
case 'TODO_ADD' : {
return applyAddTodo(state, action);
}
case 'TODO_TOGGLE' : {
return applyToggleTodo(state, action);
}
default : return state;
}
}
function applyAddTodo(state, action) {
return state.concat(action.todo);
}
function applyToggleTodo(state, action) {
return state.map(todo =>
todo.id === action.todo.id
? { ...todo, completed: !todo.completed }
: todo
);
}

Redux Reducer에 대해 알고 있는 Redux store :


import { createStore } from 'redux';
const store = createStore(reducer, []);

그런 다음 Redux Store는 작은 API 표면을 제공하여 상호 작용합니다 (예 : Redux 액션 발송 :


store.dispatch({
type: 'TODO_ADD',
todo: { id: '0', name: 'learn redux', completed: false },
});

마지막으로 JavaScript에서 Redux Store를 사용하여 변경 사항을 들을 수 있습니다.


store.subscribe(() => {
console.log(store.getState());
});

Redux는 Action, Reducer, Store와 같은 모든 조각으로 요약됩니다. 아직 React와 View가 없습니다. 뷰는 console.log로 간주 될 수 있습니다. 아직 Redux를 배우지 않았다면, Redux가 React에 통합되기 전에 가르치는 이 React + Redux 튜토리얼을 읽어보십시오.


Redux의 Actions, Reducers, Store는 Redux 툴체인에 모든 필수 장소를 가지고 있습니다. 상단에 구문 설탕이 필요한 경우 액션 제작자 및 선택자를 추가 할 수 있습니다. Redux Store를 만들기 위한 redux 라이브러리만 시작하면 됩니다. 다른 모든 것은 단지 JavaScript입니다. 또한 React와 같은 라이브러리에 대해서는 아직 볼 것이 없습니다. 자체 라이브러리인 react-redux와 생태계로 명확하게 분리되어 있습니다.


나는 Redux가 사물을 원자 부분으로 분리하는 것에 대해 많은 것을 가르쳐 주었다고 생각합니다. 라이브러리 내에서-Actions, Reducers 및 Store-모든 것이 목적과 명확한 API를 가지고 있지만 라이브러리 외부에는 React 및 Angular와 같은 다른 프레임 워크에 대한 모든 바인딩이 있습니다. 그것은 명확한 제약과 간단한 API로 어떻게 해야 하는지에 대한 마스터 플랜을 생태계에 기여하는 모든 사람들에게 주었다.


불변성 


Redux 이전의 JavaScript 환경에서는 불변성이 중요하지 않았습니다. 변수에 변이를 수행하는 것은 모든 사람의 일반적인 사업이었습니다. 그러나 최신 프론트 엔드 프레임 워크와 웹 응용 프로그램 확장으로 인해 많은 사람들이 변경 가능한 정보를 전달하는 데 어려움을 느꼈습니다. 한 곳에서 변수를 변경하면 응용 프로그램의 다른 곳에서 예상치 못한 부작용이 발생했습니다.


Redux에서 상태 컨테이너의 모든 것은 불변의 데이터 구조로 취급해야 하지만 강제 적용되지는 않습니다. 배열에 항목을 추가하는 경우 Redux를 사용하면 데이터 구조를 변경할 수 없는 것으로 취급하는 JavaScript 함수에 익숙해졌습니다.


// do
const newState = state.concat(action.todo);
// don't
state.push(action.todo);


새로운 배열 / 객체를 변경하는 대신 변경하지 않고 불변으로 유지하는 다양한 배열 및 객체 함수가 있습니다. 또한 최근의 언어 추가는 이 새로운 사고 방식을 촉진하는 데 많은 도움이 되었습니다.


const toggledTodo = { ...todo, completed: !todo.completed }; 


사람들은 JavaScript의 불변 데이터 구조와 관련하여 이러한 미묘한 차이에 대해 생각하기 시작했습니다. 이는 전체 JavaScript 개발 경험에 탁월한 이점을 제공했습니다. 응용 프로그램의 다양한 위치에서 변형 된 누출 변수가 더 이상 없습니다.


순수 함수 


불변성과 거의 동일하게, Redux가 JavaScript 에코 시스템에 도입되기 전에 순수한 함수는 크게 논의되지 않았습니다. 함수가 순수해야 하지만 웹 개발자가 절대 심각하게 받아들이지 않았다는 제안이 더 많았습니다.


// action creator returning an action
function addTodo(todo) {
return {
type: 'TODO_ADD',
todo,
};
}
const action = addTodo({
id: '0',
name: 'learn redux',
completed: false
});
store.dispatch(action);

Redux를 사용하면 사고 방식이 바뀌고 사람들은 함수에 부작용을 피하고 Redux 철학을 기뻐할 뿐만 아니라 더 나은 테스트 가능성을 보장하고 장기적으로 예상치 못한 함수 위반을 피하기 시작했습니다.


(Input) => Output 


Redux 작업은 현재 상태의 운영자일 뿐이며 Redux Reducer는 이 작업을 수행하여 한 표현에서 다음 표현으로 상태를 수정합니다. 사이에 원격 API 호출이나 다른 작업이 없습니다. 항상 하나의 함수 서명을 따릅니다.


(Current State, Action) => New State 


이것이 Redux Reducers와 일반적으로 Redux 상태 관리의 예측 가능성을 높인 비밀입니다. 하나의 조치는 조치 정보 및 현재 상태에 따라 새 상태로 연결됩니다. Redux 저장소는 이 상태의 컨테이너입니다.


함수에 대한 생각 


Redux의 인기가 높아짐에 따라 함수는 JavaScript보다 일류 시민으로 간주되었습니다. 순수한 함수의 개념은 개발자에서 개발자에게 전달되었을 뿐만 아니라 고차 함수 및 함수 구성과 같은 다른 개념이 인기를 얻었습니다.


function toggleTodo(action) {
return function(todo) {
return todo.id === action.todo.id
? { ...todo, completed: !todo.completed }
: todo;
};
}
function applyToggleTodo(state, action) {
return state.map(toggleTodo(action));
}

이러한 모든 개념은 JavaScript 개발자가 함수형 프로그래밍 패러다임에 점점 더 많이 도입되었다는 사실에 기여했습니다. 분명히 이러한 개념은 Redux에서 시작된 것이 아니지만 JavaScript를 배우기 시작했거나 지금까지 경력에 JavaScript만 사용한 많은 개발자들의 시선을 사로 잡았습니다.


JAVASCRIPT ES6 


Redux가 견인력을 얻었을 때 JavaScript ES6가 같은 시간에 소개 된 것은 단지 우연의 일치였습니다. JavaScript ES6은 개발자에게 Redux의 손에 들어간 새로운 기능을 제공했습니다. 예를 들어, 함수는 부피가 큰 함수 명령문 및 본문 대신 화살표 함수로 표현 될 수 있습니다.


const toggleTodo = action => todo =>
todo.id === action.todo.id
? { ...todo, completed: !todo.completed }
: todo;
const applyToggleTodo = (state, action) =>
state.map(toggleTodo(action));

JavaScript ES6는 많은 표현을 더 간결하게 만들었습니다. JavaScript의 새로운 스프레드 연산자를 사용하면 데이터 구조를 변경하지 않고 다른 객체에서 새 객체를 만들 수 있습니다.


const toggledTodo = {
...todo,
completed: !todo.completed,
};

Redux와 같은 많은 라이브러리를 만들었지만 JavaScript도 번성했습니다.


단일 데이터 흐름 


Redux는 이미 상태 변경을 수행하는 데 필요한 모든 조각을 분리하고 명확한 목적과 API를 제공함으로써 현대 상태 관리에 많은 예측 가능성을 추가합니다.

Action => Reducer(s) => Store 


그러나 또 다른 큰 요소는 주로 React 및 이전 상태 관리 라이브러리 (Flux 참조)에 도입 된 단방향 데이터 흐름이지만 예측 가능한 상태 관리 흐름을 위해 Redux에 의해 수용되었습니다.


View => Interaction => Action => Reducer(s) => Store => Updated View 


단방향 데이터 흐름이 명확합니다. 누가 책임이 있는지 볼 수 있습니다.


  • 상태 체인 조작을 시작하는 사람 (예 : 사용자 상호 작용)
  • 누가 정보 (활동, 현재 상태)와 함께 상태 (감독자)를 조작합니다.
  • 상태 조작의 영향을 받는 사람 (예 : UI 다시 렌더링)
1) Interaction in View =>
2) State Manipulation =>
3) Updated View =>
1) Interaction in View =>
...

정보 흐름에 대한 학습은 모든 개발자에게 큰 자산으로 간주됩니다. 순수한 기능과 불변의 데이터 구조로 인해 명확한 아키텍처와 관련하여 예측할 수 없는 부작용이 없으며 따르기 어려운 양방향 / 다중 방향 데이터 흐름이 없습니다. 프레임 워크가 실패했습니다. 모든 것이 한 방향으로 이동하여 궁극적으로 예측 가능한 상태 관리 루프가 발생합니다. 


이벤트가 아닌 설정에 대한 생각 


종종 사람들은 Redux를 간단한 세터 / 게터 개념으로 잘못 생각합니다. UI는 액션을 전달합니다. 이것은 감속기를 통과합니다. 궁극적으로 Redux 스토어에서 새로운 상태를 설정합니다. 구독 한 UI는 Redux 스토어에서 업데이트를 수신하고 새 상태에 따라 다시 렌더링 합니다.


// that's not Redux
store.setState({
id: '0',
name: 'learn redux',
completed: false
});

그러나 그것은 정교한 이벤트 중심 개념이기 때문에 Redux가 그 자체에 대한 완전한 신용을 부여하지는 않습니다 (이벤트 소싱 또는 CQRS 참조). 사이에 감속기가 있어 들어오는 행동에 의해 영향을 받는지 여부를 스스로 결정합니다. 그것은 관점을 이동

  • 암시적 상태 조작에 대한 명시적
  • setters to events
  • one-purpose reducers to multi-purpose reducers
  • narrow minded reducers to open minded reducers

특히 마지막 두 가지 사실은 개발자가 Redux의 잠재력을 최대한 활용할 수 있도록 고려해야 합니다. 갑자기 reducer가 일반 세터보다 높은 추상화 수준에서 작동하고 응용 프로그램의 다른 reducer와 동일한 동작을 수행하기 때문입니다.


import { createStore, combineReducers } from 'redux';
function todoReducer(state, action) {
switch(action.type) {
case 'TODO_ADD' : {
return applyAddTodo(state, action);
}
case 'TODO_TOGGLE' : {
return applyToggleTodo(state, action);
}
default : return state;
}
}
function statisticReducer(state, action) {
switch(action.type) {
case 'TODO_ADD' : {
return applyCalculateTodos(state, action);
}
default : return state;
}
}
const rootReducer = combineReducers({
todos: todoReducer,
statistics: statisticReducer,
});
const store = createStore(rootReducer, []);

참고 : 주어진 예제는 여기에서 완벽하지 않다는 것을 명심하십시오. 할일 개체를 기반으로 계산 된 모든 종류의 통계는 상태에서 모든 할 일을 사용할 수 있게하고 적절한 선택기로 적시에 통계를 계산하여 즉시 계산할 수 있기 때문에 . 


Redux는 이전에 본 적이 없는 웹 개발자에게 이벤트 중심 시스템의 훌륭한 데모를 제공합니다. 조치, 리듀서 및 상점이 함께 작동하는 방식을 살펴보면 다른 애플리케이션의 이벤트 중심 시스템이 어떻게 작동하는지 사람들에게 많은 통찰력을 제공합니다.


도메인 기반 디자인 


DDD (Domain-Driven Design)는 Redux 자체의 문제가 아니며 여기에서 조금만 가져올 수는 있지만 소규모 응용 프로그램을 넘어 서면 모든 개발자 또는 개발자 팀은 분할 방법에 대해 생각해야 합니다. Redux를 사용할 때 state/reducers를 도메인에 추가합니다.


(A) 원격 API에서 가져온 다양한 엔티티 (예 : 할 일, 사용자), (B) 필터 (예 : 불완전한 할 일 모두 표시, 모든 활성 사용자 표시) 및 (C) 통계 (예 : 계산)에 대한 reducers가 끝날 수 있습니다 활성 사용자가 완료 한 할일 수).


import { createStore, combineReducers } from 'redux';
...
const rootReducer = combineReducers({
todos: todoReducer, // (A)
users: userReducer, // (A)
filter: filterReducer, // (B)
statistics: statisticReducer, // (C)
});
const store = createStore(rootReducer, []);

사람들이 이런 종류의 도메인 클러스터링을 볼 때 도메인 기반 디자인에 대해 생각하는지 여부는 중요하지 않지만 중요한 것은 도메인에서 무의식적으로 도메인에서 생각하기 시작하고 명확한 API를 사용하여 외부에서 도메인을 캡슐화 하는 방법입니다.


책에서 어떻게 학습되는지는 도메인 중심의 디자인이 아닐지라도, 주로 다른 프로그래밍 언어로 나타나는 이러한 개념에 대한 개발자의 마음을 열어줍니다.


혁신적인 에코 시스템 


Redux를 사용하기 시작하면 선택자와 액션 제작자를 만날 수 있습니다.


Action Creator => Action => Reducer(s) => Store => Selector => View 


이것들은 Redux가 전체 툴체인에서 모든 부분에 더 뚜렷한 역할을 부여하는 두 가지 개념입니다. Action Creator는 액션 객체를 생성하는 반면 Selector는 상태 슬라이스만 선택하여 UI에서 사용할 수 있도록 합니다.


// action creator
function addTodo(todo) {
return {
type: 'TODO_ADD',
todo,
};
}
// selector
function getCompletedTodos(state) {
return state.filter(todo => todo.completed);
}

이러한 개념을 넘어 서면 Redux Saga 또는 Redux Observables와 같은 Redux 생태계의 다른 인기 있는 라이브러리를 대부분 만나게 될 것입니다. Redux Observables는 Redux의 부작용을 미들웨어로 처리합니다. 그들 각각은 Redux에 새로운 개념을 도입했습니다.이 개념은 JavaScript에서 전혀 사용되지 않습니다 : 생성기관찰 가능.


// Redux Saga
function* fetchUser(action) {
try {
const user = yield call(Api.fetchUser, action.payload.userId);
yield put({ type: 'USER_FETCH_SUCCEEDED', user: user });
} catch (e) {
yield put({ type: 'USER_FETCH_FAILED', message: e.message });
}
}
function* userWatcher() {
yield takeEvery('USER_FETCH_REQUESTED', fetchUser);
}


이것이 Redux를 성공적으로 만든 또 다른 측면 인 생태계입니다. Redux의 개념은 핵심이지만 API 디자인과 JavaScript 사용의 단순성으로 인해 다른 개발자는 세상에 옵트 인 할 수 있는 많은 기회가 생겼습니다. 이로 인해 라이브러리 작성자는 생성기 또는 관찰 가능 항목과 같은 새로운 개념을 탐색하고 더 많은 개발자의 관심을 끌었습니다.


// Redux Observable
const pingEpic = action$ => action$.pipe(
filter(action => action.type === 'PING'),
delay(1000),
mapTo({ type: 'PONG' })
);
dispatch({ type: 'PING' });

생태계가 있는 Redux는 많은 JavaScript 개발자의 지평을 넓혔습니다. 프로그래밍 언어로 가능한 것을 탐색 할 수 있는 도구를 제공합니다. 또한 다른 주 관리 도서관 저자들은 Redux의 생태계에서 일어나는 모든 일에서 영감을 얻어 번성하는 생태계를 위한 완벽한 청사진을 만듭니다.


KISS 


일반적인 주제입니다. 학습 Redux는 모든 것을 한 번에 시작할 때 압도적입니다. 있습니다 ...


  • actions
  • reducers
  • Redux store
  • connecting it to React
  • combining reducers
  • middleware
  • action creators
  • selectors
  • generators/observables

그러나 이 모든 것은 Redux를 처음 접하는 사람들이 학습 경험을 어떻게 구성 하는지에 달려 있습니다. 이 기사를 처음부터 다시 시작하면 Redux의 핵심은 다음과 같습니다.


Action => Reducer(s) => Store 


그게 다야. Redux는 간단하고 바보입니다. 숨겨진 마술은 없으며 99 %는 행동과 감속기로 표현 된 순수한 JavaScript입니다. Redux 스토어 API만이 작은 표면적을 제공합니다 ...


// dispatching actions
store.dispatch(myAction);
// subscribing to state updates
store.subscribe(() => {
// do something, e.g. re-render UI
});
// getting the state
store.getState();

Redux에는 더 이상 없습니다. KISS는 Redux 학습에도 적용되어야 합니다. 선택기, 사가 및 반응에 대해 걱정하지 않고 핵심 개념으로 시작하십시오. 그런 다음 편안하다고 느끼면 거기에서 앞으로 나아가십시오. 너무 부담이 된다고 생각되면 물건을 너무 많이 버리지 마십시오.


결국 KISS는 Redux를 사용한 모든 사람에게 중요한 교훈입니다. 자체 라이브러리를 작성하기로 결정한 경우 KISS. React 컴포넌트를 빌드하기로 결정하면 KISS. API를 열기로 결정하면 KISS. 결국, 이것이 Redux를 대중적으로 만든 것입니다. 하나의 문제 만 해결했지만 놀랍도록 훌륭하게 해결되었습니다.


금지하지 마십시오. 겸손하라 


Redux 제작자와 팀을 따르는 모든 사람들은 그들이 겸손한 것을 볼 수 있습니다. Dan Abramov의 블로그 게시물에는 애플리케이션에 Redux가 필요하지 않을 수도 있다고 제안 되어 있습니다. 라이브러리 뒤에 있는 이 모든 사람들은 JavaScript 커뮤니티의 훌륭한 역할 모델입니다.


나는 기술적이지 않은 수준에서 모든 사람들이 이러한 성격 특성으로부터 무언가를 배울 수 있다고 생각합니다. 누군가 물어볼 때 도움이 되는 조언을하십시오. 당신의 물건에 대해 자랑하지 마십시오. 다른 사람들의 의견을 고려하십시오. 좋아하는 프레임 워크를 다른 사람의 얼굴에 버리지 마십시오. 우리는 모두 인간이기 때문에 JavaScript로 놀라운 것을 개발하기 위해 서로를 지원합시다!


REDUX는 하나 더 나은 자바스크립트 개발자를 만듭니다 


이전의 모든 사항을 고려하여 Redux는 모든 사람을 더 나은 JavaScript 개발자로 만듭니다. 사람들은 함수, 고차 함수 또는 컴포저 블 함수 또는 간결한 함수에서 사고 하기 시작하고, 불변의 데이터 구조, 순수한 함수 및 응용 분야의 도메인을 고려하고, 역할 모델을 따라 생태계에 기여할 때 거인의 어깨에 머물러 있습니다. . 어쩌면 자랑스럽고 겸손한 태도가 한 사람이나 다른 사람에게도 문을 닫을 수도 있습니다.


나는 Redux의 유산이 타이밍을 통해 크게 영향을 받았다고 생각합니다. 자바 스크립트를 자신의 프로그래밍 언어로 "알고" 알고 있는 사람들이 많았으며, 최근에 처음으로 언어로 시작했을 수도 있고, 불변성, 기능적 프로그래밍, 도메인 기반 설계 또는 생성기와 같은 더 넓은 프로그래밍 개념과 기술을 소개 한 적이 없습니다 . 그들은 Redux를 손에 들고 이 모든 것들에 대해 많은 것을 배웠습니다. 앞으로 Redux가 사라질 수도 있지만 JavaScript를 처음 접하는 모든 사람에게 JavaScript를 배우는 데 따른 모든 이점을 위해 JavaScript를 배우는 것이 좋습니다.



페이지 정보

조회 45회 ]  작성일19-10-25 20:09

웹학교