ReactNative에서 Redux 아키텍처를 사용하는 방법

이 글은 주로 ReactNative에서 사용되는 Redux 아키텍처에 대한 요약을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴볼까요

이 글은 ReactNative에서 사용되는 Redux 아키텍처를 요약해서 소개하고 모두와 공유합니다. 자세한 내용은 다음과 같습니다.

저는 한동안 Redux를 사용해왔습니다. 요약하자면.

Redux를 사용하는 이유는?

Background:

1. RN의 상태(변수, 하위 컴포넌트가 보이지 않음)와 props(불변, 하위 컴포넌트가 표시됨) 디자인으로 대규모 프로젝트를 쉽게 처리할 수 있습니다. 상태로 인해 상태 혼란이 발생하고 구성 요소 렌더링 오류

2. RN은 대상 바인딩이 필요하지 않은 가상 DOM을 사용합니다. -> 작업은 상태가 변경되는 한 새 상태의 구성 요소가 렌더링되고 데이터가 표시됩니다. 는 한 방향으로 전송되며 MVC 디자인 패턴은 양방향 데이터 흐름을 갖습니다.

3. RN은 테스트하기가 쉽지 않습니다. Redux는 매우 편리한 모의 테스트 방법을 제공합니다. Redux Development Environment redux : 'NPM 설치-'NPM 설치-Save Redux 'install React Native and Redux 바인딩 라이브러리 : NPM 설치-Save React-Redux install Redux Thunk 비동기 액션 미들웨어: npm install –save redux-thunk

세 가지 원칙

단일 데이터 소스

1. 전체 애플리케이션의 상태는 객체 트리에 저장되고, 객체 트리는 매장에서 독특해요. 저장소의 상태는 구성 요소에 바인딩되어 있습니다.

상태는 읽기 전용입니다.

2. 상태를 변경하는 유일한 방법은 작업을 트리거하는 것입니다. action은 이벤트를 상수로 나타낼 수 있는 type 속성을 포함하는 일반 JS 객체입니다.

순수 함수를 사용하여 수정 수행

3. 해당 작업이 상태를 수정하는 방법을 설명하는 리듀서를 작성하세요. 일반적으로 부작용 없이 처리하려면 스위치(action.type)를 사용하면 됩니다.

Use

react-redux는 연결 및 공급자를 제공합니다.

1.Provider는 최상위 배포 지점이고 해당 속성은 연결된 모든 구성 요소에 상태를 배포하는 Store입니다. 2.connect: 두 개의 매개 변수를 허용합니다. 하나는 mapStateToProps 또는 mapDispatchToProps이고 다른 하나는 구성 요소 자체입니다. 바인딩됩니다.

Store

Store는 Reducer와 Action을 연결하는 객체입니다. Store에는 다음과 같은 책임이 있습니다.

애플리케이션 상태 유지 - 데이터베이스와 유사하며 애플리케이션의 모든 상태를 저장합니다.

getState() 메소드를 제공합니다. 모든 현재 상태 얻기

는 상태를 업데이트하는 디스패치(작업) 메서드를 제공합니다. 이는 상태를 데이터베이스에 저장하고 상태를 변경하는 작업을 저장하는 것과 같습니다.

구독(리스너)을 통해 청취자를 등록하세요.

Store는 본질적으로 전체 애플리케이션의 상태를 트리 형태로 저장하는 객체입니다. 그리고 몇 가지 방법을 제공합니다. 예를 들어 getState() 및 Dispatch()입니다.

Redux 애플리케이션에는 Store가 하나만 있습니다.

1. Store는 전체 애플리케이션의 루트 Reducer의 초기 State를 기반으로 createStore 메소드를 통해 생성됩니다.

코드는 다음과 같습니다:

2. import { createStore, applyMiddleware } from 'redux';
   import thunk from 'redux-thunk';//异步
   import reducers from './reducers';
   const Store = applyMiddleware(thunk)(createStore)(reducers);
   export default Store;

   Reducers

3. Action은 어떤 일이 발생했다는 사실만 설명할 뿐 애플리케이션이 상태를 업데이트하는 방법을 지정하지 않습니다. 이것이 감속기가 하는 일입니다.

리듀서의 본질은 함수, 즉 순수함수입니다. 부작용은 없습니다. 간단히 말해서 Reducer는 수신된 작업과 상태를 기반으로 Store의 상태를 수정하는 한 가지 작업만 담당합니다.

4. (state, action) => newState

일반적으로 구현 시 다음을 통해 switch(action.type )를 사용하여 다양한 작업을 결정하면 기본값은 이전 상태입니다. 초기 상태도 정의할 수 있습니다.

코드:

import { combineReducers } from 'redux';
const newState = (state = {}, action = {}) => {
 switch (action.type) {
  case ActionTypes.CSTATE:
   return { ...state, ...action.state };
  case '_DPDATACHANGE_':
   return {...state, ...action.dpState};
  default:
   return state;
 }
};
//Reducer 合并
export default combineReducers({
 newState,
});

참고: 반환되는 것은 새 상태입니다. 이전 상태 값의 일부를 유지해야 하는 경우...state를 사용하세요(ES7 객체 확장 구문, 객체의 해당 속성이 얕게 복사됩니다). , 여기서는 Object.sign({ }, state, newState))와 동일하며 상태를 병합하면 하나의 레이어만 병합되며 복잡한 상태는 수동으로 병합해야 합니다.

Action

Action은 이벤트를 나타내는 하나 이상의 유형 속성을 포함하는 일반 JS 객체이며, 다른 속성을 사용하여 데이터를 전달할 수 있습니다. 실제로는 프로세스에 대해 함수가 정의되며, 프로세스는 네트워크 요청을 포함하고 최종적으로 Action을 반환할 수 있습니다. Code: Store는 이 Action을 전달할 수 있습니다. Action의 유형은 식별자를 나타내며 상태는 해당 Action이 전달하는 데이터입니다.

export const newState = state => {
 Store.dispatch({
  type: ActionTypes.CSTATE,
  state,
 });
};

Persistence

액션이 트리거되면 해당 리듀서 키에 따라 데이터가 복원되며, 애플리케이션이 시작될 때만 액션을 배포하면 됩니다. 이는 또한 구성 가능한 확장 서비스로 추상화하기 쉽습니다. 실제로 타사 라이브러리 redux-persist는 이미 모든 작업을 완료했습니다.

Action의 코드는 다음과 같습니다:

export const getStorage = async (key) => {
 const d = await AsyncStorage.getItem(key);
 return JSON.parse(d);
};
export const setStorage = (key, value) => {
 AsyncStorage.setItem(key, JSON.stringify(value));
};

connect

By - getState() 메소드 제공. 현재 상태를 모두 가져옵니다connect를 통해 필요한 상태와 Action Creator를 컴포넌트의 props에 바인딩하여 컴포넌트가 props를 통해 Action Creator를 호출하거나 다양한 prop을 기반으로 다양한 컴포넌트를 렌더링()할 수 있도록 합니다.

코드:

mapStateToProps({ newState }) {
      const value = newState[name];//name: newState.name
      return {
       name,
      };
     },

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

Angular에서 숨겨진 디스플레이를 구현하는 방법

Angular에서 민감한 텍스트 프롬프트를 구현하는 방법

Angular에서 orderBy 정렬 및 퍼지 쿼리를 구현하는 방법

Javascript에서 키보드의 키 코드를 얻는 방법

vue vuex vue-rouert 권한 라우팅(자세한 튜토리얼)

위 내용은 ReactNative에서 Redux 아키텍처를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!