집 > 기사 > 웹 프론트엔드 > ReactNative에서 Redux 아키텍처를 사용하는 방법

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

亚连원래의: 2018-06-20 16:23:301489검색

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

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

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

Redux를 사용하는 이유는?

Background:

RN의 상태(변수, 하위 컴포넌트가 보이지 않음)와 props(불변, 하위 컴포넌트가 표시됨) 디자인으로 대규모 프로젝트를 쉽게 처리할 수 있습니다. 상태로 인해 상태 혼란이 발생하고 구성 요소 렌더링 오류
RN은 대상 바인딩이 필요하지 않은 가상 DOM을 사용합니다. -> 작업은 상태가 변경되는 한 새 상태의 구성 요소가 렌더링되고 데이터가 표시됩니다. 는 한 방향으로 전송되며 MVC 디자인 패턴은 양방향 데이터 흐름을 갖습니다.
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

세 가지 원칙

단일 데이터 소스

전체 애플리케이션의 상태는 객체 트리에 저장되고, 객체 트리는 매장에서 독특해요. 저장소의 상태는 구성 요소에 바인딩되어 있습니다.
상태를 변경하는 유일한 방법은 작업을 트리거하는 것입니다. action은 이벤트를 상수로 나타낼 수 있는 type 속성을 포함하는 일반 JS 객체입니다.
해당 작업이 상태를 수정하는 방법을 설명하는 리듀서를 작성하세요. 일반적으로 부작용 없이 처리하려면 스위치(action.type)를 사용하면 됩니다.

Use

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

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

Store

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

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

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

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

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

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

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

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

Reducers

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

코드:

import { combineReducers } from &#39;redux&#39;;
const newState = (state = {}, action = {}) => {
 switch (action.type) {
  case ActionTypes.CSTATE:
   return { ...state, ...action.state };
  case &#39;_DPDATACHANGE_&#39;:
   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,
      };
     },

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

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

관련 기사