ReactNative 에서 Redux 구 조 를 사용 하여 정리 합 니 다.

본 고 는 ReactNative 에서 Redux 구 조 를 사용 하여 총 결 하여 여러분 에 게 공유 하 는 것 을 소개 합 니 다.구체 적 으로 다음 과 같다.
리 눅 스 를 사용 한 지도 꽤 되 었 다.정리 해 봐.
리 눅 스 를 왜 써 요?
배경:

RN 의 state(가 변,하위 구성 요소 보이 지 않 음)와 props(가 변,하위 구성 요소 보이 지 않 음)의 디자인 은 대형 프로젝트 를 직면 할 때 state 를 무심코 수정 하여 상태 가 혼 란 스 럽 고 구성 요소 렌 더 링 오류

가 발생 하기 쉽다.

RN 은 Virtual DOM 을 사 용 했 습 니 다.Target 바 인 딩->Action 이 UI 속성 을 수정 할 필요 가 없습니다.상태 가 변 하면 render 새로운 상태의 구성 요소,데이터 단 방향 전달,MVC 의 디자인 모델 은 양 방향 데이터 흐름 이 존재 합 니 다.

RN 은 테스트 가 쉽 지 않 고,리 눅 스 는 매우 편리 한 mock 테스트 방식 을 제공한다.

Redux 개발
개발 환경

Redux 설치:'npm install Csave redux'

React Native 와 Redux 바 인 딩 라 이브 러 리 설치:npm install Csave react-redux

Redux Thunk 비동기 액 션 미들웨어 설치:npm install Csave redux-thunk

세 가지 원칙
단일 데이터 원본
전체 적 용 된 state 는 대상 트 리 에 저장 되 어 있 으 며,대상 트 리 는 유일한 store 에 존재 합 니 다.store 의 state 를 구성 요소 에 연결 합 니 다.
State 는 읽 기만 해 요.
state 를 바 꾸 는 유일한 방법 은 action 을 촉발 하 는 것 이다.action 은 type 속성 을 가 진 일반 JS 대상 으로 type 은 상수 로 사건 을 표시 할 수 있 습 니 다.
순 함수 로 수정 을 실행 합 니 다.
reducers 를 작성 하여 대응 하 는 action 이 state 를 어떻게 수정 하 는 지 설명 합 니 다.일반적으로 switch(action.type)로 처리 할 수 있 으 며 부작용 이 없습니다.
쓰다
react-redux 는 connect 와 Provider 를 제공 합 니 다.
1.Provider 는 맨 위 에 있 는 배포 점 입 니 다.속성 은 Store 입 니 다.State 를 모든 connect 구성 요소 에 배포 합 니 다.
2.connect:두 개의 인 자 를 받 아들 입 니 다.하 나 는 mapStateToProps 나 mapDispatchToProps 이 고 하 나 는 연결 할 구성 요소 자체 입 니 다.
Store
Store 는 Reducer 와 action 을 연결 하 는 대상 이다.Store 는 다음 과 같은 직책 이 있 습 니 다.

응용 프로그램의 statec 유사 데이터 베 이 스 를 유지 하고 응용 프로그램의 모든 state 를 저장 합 니 다.

getState()방법 을 제공 합 니 다.현재 state 가 져 오기;

dispatch(action)방법 으로 state 를 업데이트 하 는 것 은 데이터 베 이 스 를 저장 하고 action 에 저장 하여 state 를 바 꾸 는 것 과 같 습 니 다.

subscribe(listener)를 통 해 모니터 를 등록 합 니 다.

Store 는 본질 적 으로 하나의 대상 으로 트 리 형식 으로 전체 응용 프로그램의 State 를 보존 했다.방법 을 제공 했다.예 를 들 어 getState()와 dispatch().
Redux 응용 프로그램 은 유일한 Store 만 있 습 니 다.
Store 는 createStore 방법 을 통 해 전체 응용 프로그램의 루트 Reducer 의 초기 State 에 따라 만 듭 니 다.
코드 는 다음 과 같 습 니 다:

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

Reducers
Action 은 이 사실 이 발생 했다 는 사실 만 묘 사 했 을 뿐,state 를 어떻게 업데이트 하 는 지 는 밝 히 지 않 았 다.이것 은 reducer 가 해 야 할 일이 다.
Reducer 의 본질은 함수 이 고 순 함수 입 니 다.아무런 부작용 도 없다.쉽게 말 하면 Reducer 는 한 가지 일 만 맡 는 다.바로 받 은 action 과 state 에 따라 Store 의 state 를 수정 하 는 것 이다.
(state, action) => newState
일반적으로 실 현 될 때 switch(action.type)를 통 해 서로 다른 Action 을 판단 하고 default 는 구 state 입 니 다.초기 상 태 를 정의 할 수 있 습 니 다.
코드:

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 를 되 돌려 줍 니 다.일부 오래된 state 값 을 유지 하려 면...state(ES7 의 대상 이 문법 을 펼 치면 대상 에 대한 대응 속성 을 얕 게 복사 합 니 다.여 기 는 Object.assign({},state,new State)과 같 습 니 다.state 를 합치 면 한 층 만 합 쳐 지고 복잡 한 state 에 대해 서 는 수 동 으로 합 쳐 야 합 니 다.
Action
Action 은 일반 JS 대상 으로 최소한 type 속성 대표 이 벤트 를 포함 하고 다른 속성 은 데 이 터 를 전달 할 수 있 습 니 다.실천 적 으로 하나의 절차 에 대해 함 수 를 정의 합 니 다.절 차 는 네트워크 요청 을 포함 하고 마지막 으로 Action 으로 돌아 갈 수 있 습 니 다.이 함 수 는 Action Creator 라 고 합 니 다.
코드:Store 는 dispatch 라 는 Action 을 사용 할 수 있 습 니 다.action 의 type 은 식별 자 를 표시 하고 state 는 데 이 터 를 가지 고 있 습 니 다.

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

지구 화
액 션 을 실행 할 때 reducer key 에 따라 데 이 터 를 복원 한 다음 에 응용 프로그램 이 시 작 될 때 액 션 을 나 누 어 주면 설정 가능 한 확장 서비스 로 추상 화 되 기 쉽다.실제로 3 자 라 이브 러 리 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
getState()방법 을 제공 합 니 다.모든 현재 state 가 져 오기
connect 를 통 해 필요 한 state 와 Action Creator 를 구성 요소 의 props 에 연결 하면 구성 요 소 는 props 를 통 해 Action Creator 를 호출 하거나 props 에 따라 render()를 다른 구성 요소 로 호출 할 수 있 습 니 다.
코드:

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

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.