JS개발을 어떻게 빨리 시작하는지섹션 2: 모범 사례

오늘, 우리는 당신에게 본문의 두 번째 부분How to Start ReactJS Development Fast: 3 Solid Tools and Best Practices을 제공할 것입니다.여기서 우리는 귀하께 React Redux 프로젝트 구조에 대한 최상의 실천을 제공하여 응용 프로그램 체계 구조를 더욱 잘 이해하도록 하고자 합니다.

React Redux 프로젝트 구조의 모범 사례
이 섹션에서는 how to structure your React-Redux project files and code에 대한 우리의 기본 조언을 공유하여 응용 프로그램이 확장될 때 우리의 경험에 따라 유지보수성을 유지할 수 있도록 하고자 합니다.이 설명서는create react 응용 프로그램 설정 개선을 기반으로 합니다.
처음에, 우리는 React와 Redux를 다른 폴더로 분리하기로 결정했다.따라서 변경 사항을 적용하거나 새로운 기능을 추가하는 과정을 간소화했다.Redux별 코드(감축기, 동작, 동작 유형)는 기능 우선 모드Re-Ducks로 구분됩니다.다음은 실제로 사용한 프로젝트 구조의 예입니다.

src/
├── state => redux specific code (Re-Ducks)
|   ├── ducks/
|   |   ├── duck/
|   |   |   ├── types.js
|   |   |   ├── actions.js
|   |   |   ├── selectors.js
|   |   |   ├── reducers.js
|   |   |   ├── tests.js
|   |   |   ├── index.js
|   utilities/ => global constants and helper functions
|   views/
|    ├── routes/       => base router
|    ├── components/   => feature-first components
|    ├── pages/        => layouts, related to routes
|    ├── styled/       => StyledComponents
|    └── UI/           => reusable components

우리는 먼저 React 구성 요소를 만들고 해당하는 Redux 코드를 만드는 것을 좋아한다.그것은 우리로 하여금 데이터의 수요에 대해 대체적으로 이해하게 한다.
/ducks 디렉터리에 고정된 모드가 있습니다.오리 모드의 수정 버전을 사용하여 Redux 코드를 구성합니다.

ducks/
├── duck/
|   ├── actions.js
|   ├── reducers.js
|   ├── types.js
|   ├── utils.js
|   ├── selectors.js
|   └── index.js
└── index.js

이제/duck 폴더 파일마다 왜 중요한지, 무엇을 대표하는지 토론합시다.

프로젝트 구조 파일
유형js
이 파일에는 작업 형식의 문자열 텍스트가 포함되어 있습니다.그것은 사용 가능한 조작에 대한 간단한 참고를 제공했다.이 문자열들은 대상 문자로 내보낸 다음, 하드코딩이 아닌 복원 프로그램과 동작 생성기에 가져올 수 있습니다.동작 유형을 포함하는 개별 파일을 유지하는 것은 선택할 수 있지만 프로젝트 파일의 구조를 구성할 때 사용하는 것이 좋습니다.

// types.js
export const SOME_YOUR_TYPE = "SOME_YOUR_TYPE";

움직여.js
이 파일에서 우리는 모든 조작을 정의했다.실제로 일부 개발자들은 비동기적인 조작과 조작 창설자를 분리하는 경향이 있지만, 우리는 이것이 매우 관건적이지 않다고 생각한다.

// actions.js
import types from './types.js';

// action creator
const someAction = payload => ({
  type: types.SOME_YOUR_TYPE,
  payload
});

실제로, 우리는 레드ux 중간부품 (예: redux-thunk 이나 redux-promise-middleware 을 사용하여 비동기적인 조작을 조정한다.
감속기.js
상태를 업데이트하려면 감속기가 필요합니다.우리는 createReducer 를 사용하여 모든 동작에 감속기를 만들었다.우리는 기본 스위치 박스 템플릿이 아닌 감속기를 만들기 위해 이 명령을 사용합니다.문제는, 이것은 매우 유용하다. 예를 들어, 여러 개의 case 문장에 같은 이름의 변수를 사용해서 축소기의 일부분을 제한해야 한다면.

// reducer.js
const someReducer = createReducer(initialState)({
  [types.YOUR_ACTION_TYPE]: (state, action) => {
    return {
      ...state,
      some_prop: action.payload
    };
  },

  [types.SOME_ANOTHER_TYPE]: (state, { payload: { data } }) => ({
    ...state,
    data,
    loading: false
  }),

  [types.MAY_BE_YOU_WANT_RESET]: (state, action) => ({
    ...initialState
  })
});

선택기.js
Redux에서 선택기는 저장소에서 특정 상태를 수신하는 논리입니다.또한 선택기는 주어진 상태의 데이터를 계산하여 저장소에 기본적인 원시 데이터만 저장할 수 있도록 한다.선택기는 일반적으로 저장과 용기 구성 요소 사이의 귀속의 일부분으로 사용된다.
우리는 Reselect 라이브러리를 사용하여 선택기를 만듭니다.이 라이브러리는 선택기를 만드는 유일한 방법이나 요구가 아닙니다.그러나 개발자의 경험과 성능에 있어 다음과 같은 몇 가지 장점이 있습니다.

createSelector 함수를 통해 만든 선택기가 기억됩니다.이것은 함수가 지난번에 호출되었을 때 전달된 매개 변수를 기억한다는 것을 의미한다.따라서 매개변수가 같으면 결과가 다시 계산되지 않습니다.

선택기는 쉽게 조합/연결할 수 있습니다.이렇게 하면 모든 선택기는 비교적 작은 규모를 유지하고 하나의 임무에 전념한다.

다음은 간단한 FilteredTodos 선택기 예로, 작동 방식을 보여 줍니다.

// selector.js

import { createSelector } from 'reselect';

const todoSelector = state => state.todo.todos;
const searchTermSelector = state => state.todo.searchTerm;

export const filteredTodos = createSelector(
  [todoSelector, searchTermSelector],
  (todos, searchTerm) => {
    return todos.filter(todo => todo.title.match(new RegExp(searchTerm, 'i')));
  }
);

이 라이브러리의 도움말에서 상태 searchTerm 에 설정되지 않은 모든 todos를 가져오거나 목록을 필터할 수 있습니다.
또한 모든 TODO를 표준화된 데이터와 결합하여 하나의 평면 형태를 만들 수 있습니다.

import { denormalize } from 'normalizer';

import { todo } from '../../schemas';

const getById = state => state.todo.byId;

const getAllIds = state => state.todo.all;

export const makeAllTodos = () =>
 createSelector(
   [getAllIds, getById],
   (all, todos) =>
     denormalize(all, [todo], { todos}),
 );

색인js
여기서 모든 동작, 선택기, 축소기를 기본 내보내기로 다시 내보냅니다.

// index.js
export * from './actions';
export * from './selectors';

export { default } from './reducer';

마지막으로, 우리 오리 폴더가 준비되었습니다!
이것은 프로그램이 확장될 때 유지보수할 수 있도록 React 응용 프로그램 구조를 구성하는 방식입니다.

결론
Codica에서 저희Best Practices on React-Redux project development를 만들었습니다. 응용 프로그램 체계의 구조를 이해하고 구조가 좋은 코드를 구축하는 데 도움을 줄 수 있습니다.Dell의 전문가는 이러한 권장 사항이 유지보수와 읽기가 쉽도록 프로젝트 구조를 올바르게 구성하는 데 도움이 될 것이라고 믿습니다.
계속해서 저희 전문을 주시하고 보십시오: How to Start ReactJS Development Fast: 3 Solid Tools and Best Practices.