react/redux/saga/selector 설정에서 '어디로 갈 것인가'와 맞서 싸다

Question

프로젝트에 ARc (Atomic React)를 새로 사용하고 있습니다. (대단한 일이며 궁극적으로 앞으로있을 일에 대한 미래를 예측할 수 있습니다. 엔터 프라이즈 수준의 제품),하지만 그것을 함께 잘못 퍼즐하지 않는 경우에만 미래의 증거이고 현재 내 애플 리케이션에서 선택기를 사용하는 방법을/언제/어디서/왜 주위에 내 머리를 얻을 수 없습니다.

읽으신 분은 How is state passed to selectors in a react-redux app?으로 훌륭하지만 실제로 몇 가지 예를 들어 봐야합니다.

현재 해결해야 할 문제는 user 개체 (앱 전체에 액세스 가능)와 해당 데이터를 사용하여 사용자가 수정할 수있는 계정 설정 페이지의 상태를 쉽게 볼 수있는 슬라이스를 만드는 것입니다. 그들 자신의 이름, 전자 우편, 등등. 나는 그들이상점을 실제로 사용하기를 원하지 않을 것이다. 왜냐하면 그들이 실제로 submit을 칠 때까지 아무것도 바꾸지 않기를 원하기 때문이다. 그러나 redux에서 양식 상태를 유지하기를 원할 것이다. 작업 :

export const USER_GET_REQUEST = 'USER_GET_REQUEST' 
export const USER_GET_REQUEST_SUCCESS = 'USER_GET_REQUEST_SUCCESS' 
export const USER_GET_REQUEST_FAILURE = 'USER_GET_REQUEST_FAILURE' 

export const getUserRequest = (params, resolve, reject) => ({ 
    type: USER_GET_REQUEST, 
    params, 
    resolve, 
    reject, 
}) 

export const getUserRequestSuccess = user => ({ 
    type: USER_GET_REQUEST_SUCCESS, 
    user, 
}) 

export const getUserRequestFailure = error => ({ 
    type: USER_GET_REQUEST_FAILURE, 
    error, 
}) 

무용담 :

import { take, put, call, fork } from 'redux-saga/effects' 
import api from 'services/api' 
import * as actions from './actions' 

export function* readGetUser() { 
    try { 
    const data = yield call(api.get, '/user') 
    yield put(actions.getUserRequestSuccess(data)) 
    } catch (e) { 
    yield put(actions.getUserRequestFailure(e)) 
    } 
} 

export function* watchUserGetRequest() { 
    while (true) { 
    const { params } = yield take(actions.USER_GET_REQUEST) 
    yield call(readGetUser, params) 
    } 
} 

export default function*() { 
    yield fork(watchUserGetRequest) 
} 

감속기 :

(내가 원하는 다른 용기에 소품을 통해 액세스 할 수 있습니다) 모든 좋은 내 사용자에로드

import { initialState } from './selectors' 
import { USER_LOGIN_SUCCESS, USER_GET_REQUEST_SUCCESS } from './actions' 

export default (state = initialState, action) => { 
    switch (action.type) { 
    case USER_LOGIN_SUCCESS: 
     return state 
    case USER_GET_REQUEST_SUCCESS: 
     return { 
     ...state, 
     user: action.user, 
     } 
    default: 
     return state 
    } 
} 

선택기 (내 말도 안되는 코드 주석 처리 된 한 줄은 user에는 실제로 사용자 데이터가 있지만 IT 데이터는 어떻게 처리합니까?

export const initialState = { 
    user: {}, 
} 

export const getUser = (state = initialState) => state.user || initialState.user 

// export const getUser = (state = initialState) => { 
// if (state.user) { 
//  return Object.assign({}, state, { 
//  formData: { 
//   firstName: state.user.firstName, 
//   lastName: state.user.lastName, 
//   email: state.user.email, 
//   phone: state.user.phone, 
//  }, 
//  }) 
// } 
// 
// return initialState.user 
// } 

코드 도움말은 놀랍고 명확한 설명은 내 자부심에 내 흔들리지 않는 애정과 감사 + 언급을 얻습니다.

Answer 1

선택기 기능은 저장소에서 특정 데이터 조각을 추출하려는 곳이면 어디에서나 사용할 수 있으며 사용해야합니다. 그것들을 "상태 트리에 대한 쿼리"라고 생각하십시오. 일종의 SQL 쿼리와 같은 것입니다.

이들은 구성 요소에 필요한 데이터를 추출하는 데 가장 많이 사용되지만, 저장소 내용 (예 : 썽크 작업 작성자 또는 무용담)을 기반으로 조건부 논리를 실행해야하는 곳에서도 사용됩니다. 원한다면 감속기에서도 사용할 수 있습니다.

일반적으로 셀렉터는 입력을 메모하는 reselect 라이브러리를 사용하여 만듭니다. 즉, 최종 제공된 "출력"기능은 입력이 실제로 변경된 경우에만 실행됩니다. 간단한 예는 다음과 같습니다.

import {createSelector} from "reselect"; 

const selectUser = state => state.user; 

const selectUserFirstName = createSelector(
    selectUser, 
    user => user.firstName 
); 

const selectUserLastName = createSelector(
    selectUser, 
    user => user.lastName 
); 

const selectUserFullName = createSelector(
    [selectUserFirstName, selectUserLastName], 
    (firstName, lastName) => firstName + " " + lastName 
); 

이 예에서 "firstName + lastName"선택기는 두 입력 중 하나가 실제로 변경된 경우에만 실행됩니다. 그렇지 않으면 이전 캐시 된 결과 값을 리턴합니다.

const mapState = (state) => { 
    const userFullName = selectUserFullName(state); 

    return {userFullName}; 
} 

가 선택기에 대한 자세한 내용은 내 React/Redux links list의 Redux Techniques#Selectors and Normalization 섹션을 참조하십시오 : 이것은 다음과 같이 사용될 수 있습니다. 또한 Practical Redux tutorial series에 셀렉터를 사용합니다. 관련 메모로 Practical Redux Part 8: Form Draft Data Management 또는 내 링크 목록의 React and Forms 섹션에있는 기사를 읽을 수 있습니다.