Redux — JavaScript 라이브러리

Redux는 무엇입니까?

• Redux는 클라이언트, 서버 및 네이티브 환경에서 일관되게 작동하고 테스트하기 쉬운 JavaScript 앱을 작성할 수 있도록 설계된 예측 가능한 상태 컨테이너입니다.
• Redux는 Dan Abramov가 2015 년 6 월경에 만들었습니다. Facebook의 Flux와 함수형 프로그래밍 언어 Elm에서 영감을 얻었습니다. Redux는 단순성 , 작은 크기 (단지 2KB) 및 훌륭한 문서로 인해 매우 빠르게 인기를 얻었습니다 .

Redux의 예측 가능성은 다음과 같이 가장 중요한 세 가지 원칙에 의해 결정됩니다.

1. 단일 진실 소스 — 전체 응용 프로그램의 상태가 단일 저장소 내의 개체 트리에 저장 됩니다. 전체 애플리케이션 상태가 단일 트리에 저장되므로 디버깅이 쉽고 개발 속도가 빨라집니다.
2. State is Read-only — 상태를 변경하는 유일한 방법은 발생한 상황을 설명하는 객체 인 action 을 내보내는 것입니다. 즉, 아무도 애플리케이션의 상태를 직접 변경할 수 없습니다.
3. 순수 함수로 변경 — 상태 트리가 동작에 의해 어떻게 변환되는지 지정하려면 순수 리듀서 를 작성 합니다. 감속기는 상태 수정이 발생하는 중심 위치입니다. 감속기는 현재 상태와 수행 할 작업을 취하는 기능입니다. 함수는 기존 상태의 수정 된 버전이 아닌 새로 업데이트 된 상태를 반환해야합니다 .

: 돌아 오는 세 개의 건물 부분이 행동 , 저장 및 감속기를 .

Redux의 작업

간단히 말해서 액션은 이벤트 입니다. 애플리케이션에서 Redux 스토어로 데이터를 보낼 수있는 유일한 방법입니다. 데이터는 사용자 상호 작용, API 호출과 같은 내부 이벤트 또는 양식 제출에서 발생할 수 있습니다.

• 작업은 일반 JavaScript 객체 이며 수행 할 작업 유형을 나타내는 type 속성 (일반적으로 상수)이 있어야합니다. 또한 작업에서 처리해야하는 정보가 포함 된 페이로드 가 있어야합니다.

{ 
  type: "LOGIN",
  payload: {
    username: "Ayush",
    password: "12345"
  }
}

const setLoginStatus = (name, password) => {
  return {
    type: "LOGIN",
    payload: {
      username: "Ayush",
      password: "12345"
    }
  }
}

store.dispatch(setLoginStatus(name, password));

• 논리와 계산을 작성할 수있는 유일한 곳입니다. Reducer 함수는 앱의 이전 상태와 전달되는 작업을 수락하고 다음 상태를 계산하고 새 개체를 반환합니다.
• 다음과 같은 몇 가지 작업은 리듀서 내부에서 절대 수행해서는 안됩니다.-함수 인수의 돌연변이, API 호출 및 라우팅 논리, Math.random ()과 같은 비 순수 함수 호출
• reduce콜백 함수가 수행 된 후 여러 값에서 단일 값이 계산되는 JavaScript 의 함수를 기반으로합니다 .

Redux reducer signature
(previousState, action) => nextState
Array.prototype.reduce signature
(accumulator, value) => (accumulator + value)
Example:
const handleAuth = (state = initialState, action) => {
    switch (action.type) {

      // This reducer handles any action with type "LOGIN"
      case "LOGIN":
          return state.map(user => {
              if (user.username !== action.payload.username) {
                  return user;
              }

              if (user.password == action.payload.password) {
                  return {
                      ...user,
                      login_status: "LOGGED IN"
                  }
              }
          });
        default:
          return state;
      } 
};

• 더 복잡한 앱의 경우 combineReducers()Redux에서 제공 하는 , 유틸리티를 사용할 수 있습니다 (실제로 권장 됨). 앱의 모든 감속기를 단일 인덱스 감속기로 결합합니다. 모든 리듀서는 앱 상태의 자체 부분을 담당하며 상태 매개 변수는 리듀서마다 다릅니다. 이 combineReducers()유틸리티를 사용하면 파일 구조를 훨씬 쉽게 유지 관리 할 수 ​​있습니다.

const rootReducer = combineReducers({
    handleAuth: handleAuth,
    editProfile: editProfile,
    changePassword: changePassword
});

• 다음을 통해 상태에 액세스 할 수 있습니다 getState().
• 상태를 다음을 통해 업데이트 할 수 있습니다 dispatch(action).
• 를 통해 리스너를 등록합니다 subscribe(listener).
• 에서 반환 한 함수를 통해 리스너 등록 취소를 처리합니다 subscribe(listener).
• createStore는 - 함수는 세 개의 인수를 가질 수 있습니다. 감속기는 앱의 다음 상태를 반환하는 함수입니다. preloadedState는 선택적 인수이며 앱의 초기 상태입니다. 인핸서는 또한 선택적 인수입니다. 타사 기능으로 매장을 개선하는 데 도움이됩니다.

Syntax - createStore(reducer, [preloadedState], [enhancer])
Example:
import { createStore } from ‘redux’;
import rootReducer from './reducers/index';
const store = createStore(rootReducer);

store.dispatch(setLoginStatus(‘alex’, ‘123456’));

• Redux 자체는 동기식이므로 네트워크 요청 과 같은 비동기 작업이 Redux와 어떻게 작동합니까? 여기서 미들웨어가 유용합니다.

• 앞서 논의했듯이 리듀서는 모든 실행 로직이 작성되는 곳입니다. Reducer는 작업을 수행하는 사람, 걸리는 시간 또는 작업이 전달되기 전과 후에 앱의 상태를 기록하는 것과는 관련이 없습니다. 이 경우 Redux 미들웨어 기능은 리듀서에 도달하기 전에 디스패치 된 액션과 상호 작용할 수있는 매체를 제공합니다.
• 일반적으로 미들웨어는 앱에서 비동기 작업을 처리하는 데 사용됩니다. Redux는 사용자 지정 미들웨어와 redux-thunk 및 redux-saga 와 같은 Redux 미들웨어를 사용할 수있는 applyMiddleware 라는 API를 제공합니다 . 그리고 이것은 다음과 같이 저장에 적용될 수 있습니다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(rootReducer, applyMiddleware(thunk));

function getUser() {
   return function() {
      return axios.get('/get_user_details');
   };
}

Syntax - ({ getState, dispatch }) => next => action
function simpleMiddleware({ getState, dispatch }) {
  return function(next){
    return function(action){
      // processing
      const nextAction = next(action);
      // read the next state
      const state = getState();
      // return the next action or you can dispatch any other action
      return nextAction;  
    }
  }
}
const store = createStore(rootReducer , initialState=[ ] , applyMiddleware(simpleMiddleware));

• 결과의 예측 가능성 — 현재 상태를 작업 및 애플리케이션의 다른 부분과 동기화하는 방법에 대해 혼동하지 않고 항상 하나의 진실 소스 인 저장소가 있습니다.
• 유지 관리 성 — 예측 가능한 결과와 엄격한 구조를 가지면 코드를보다 쉽게 ​​유지 관리 할 수 ​​있습니다. 이는 또한 구성 요소 트리에서 비즈니스 로직을 분리하는 데 도움이됩니다. 대규모 앱의 경우 앱을보다 예측 가능하고 유지 관리 할 수 ​​있도록 유지하는 것이 중요합니다.
• 조직 — Redux는 코드를 구성하는 방법에 대해 더 엄격하므로 코드를보다 일관성 있고 팀이 작업하기 쉽게 만듭니다.
• 서버 렌더링 — 이것은 특히 초기 렌더링에 매우 유용하여 더 나은 사용자 경험이나 검색 엔진 최적화를 제공합니다. 서버에서 만든 저장소를 클라이언트 측에 전달하기 만하면됩니다.
• 개발자 도구 — 개발자는 작업에서 상태 변경에 이르기까지 앱에서 진행되는 모든 작업을 실시간으로 추적 할 수 있습니다. 시간 여행 디버거와 결합 된 라이브 코드 편집을 제공합니다.
• 커뮤니티 및 생태계 — 라이브러리 또는 프레임 워크를 배우거나 사용할 때마다 큰 장점이됩니다. Redux 뒤에 커뮤니티가 있으면 사용하기에 훨씬 더 매력적입니다.
• 테스트 용이성 — 테스트 가능한 코드를 작성하는 첫 번째 규칙은 한 가지 작업 만 수행하고 독립적 인 작은 함수를 작성하는 것입니다. Redux의 코드는 대부분 작고 순수하며 고립 된 기능입니다.
• 성능 이점 — 앱의 상태를 전역으로 유지하면 성능이 약간 저하 될 것이라고 가정 할 수 있습니다. 대체로 그렇지 않습니다. React Redux는 내부적으로 많은 성능 최적화를 구현하므로 연결된 구성 요소가 실제로 필요할 때만 다시 렌더링됩니다.

• Redux 작업에 유용한 마지막 단계는 Redux의 자체 개발 도구를 설치하고 시작하는 것입니다. Chrome을 사용하는 경우 아래 링크를 따라 Redux DevTools를 활성화 할 수 있습니다.
• 그러나 그것을 작동시키기위한 한 단계가 더 있습니다. 우리의 createStore메서드에서 감속기 뒤에 인수로 다음을 전달해야합니다 : window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()(). 추가 store.js하면 다음과 같이 표시됩니다.

import { createStore } from 'redux';
import reducer from './reducers';
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;