Redux: 예-액션 유형 네임 스페이스를 구현하는 방법?

accountType을 액션에 넣으시겠습니까? 리듀서 팩토리를 작성하고 동일한 코드를 여러 번 사용하여 다른 작업에 응답하는 리듀서를 생성하는 방법은 examples/real-world/reducers 도 참조하세요.

마찬가지로 액션 생성자는 함수일 뿐이며 다른 함수를 반환하는 함수를 만들 수 있음을 잊지 마십시오.

나는 당신이 기존의 예에서 무시되었다고 말하는 문제의 특정 작은 예를 제공하면 정말 도움이 될 것이라고 생각합니다.

그런 다음 특정 예를 단순화하는 방법을 찾도록 도와 드릴 수 있습니다. 코드없이 질문에 대한 응답으로 특정한 것을 제안하는 것은 매우 어렵습니다.

@gaearon 나는 당신이 이것으로 어디로 향하고 있는지 알고 있지만 재사용 가능한 감속기, 액션 제작자 또는 DRY 물건을 만들려고하지는 않습니다.

두 사람이 시스템의 서로 다른 섹션에서 작업 할 수 있도록 작업 그룹을 서로 분리하려고 노력하고 있으며 작업 유형 이름에 네임 스페이스가 부족하여 실수로 서로의 감속기를 트리거하지 않도록합니다.

이것이 더 명확 해지기를 바랍니다.

https://www.npmjs.com/package/flux-constant 를 createActionTypes 라는 매우 간단한 도우미 함수와 함께 사용하여 내 프로젝트에서이 문제를 해결했습니다.

본질적으로 내 코드는 다음과 같습니다.

// create-action-types.js
var fluxConstant = require('flux-constant');
module.exports = function (types) {
    return fluxConstant.set(types);
};

// in foo-action-types.js
module.exports = createAtionTypes([
    'ADD_FOO',
    'REMOVE_FOO'
]);

// in some-store.js
var fooActionTypes = require('foo-action-types');
function (state, action) {
    switch(action.type) {
        case fooActionTypes.ADD_FOO: 

        case fooActionTypes.REMOVE_FOO:
   }
}

모든 액션 유형을 한곳에서 상수로 유지하지 않는 이유는 무엇입니까?
그런 다음 동일한 이름을 두 번 내보낼 수 없기 때문에 충돌 할 수 없습니다.

이를 더 잘 시각화하기 위해 이것이 상점의 초기 상태라고 가정 해 보겠습니다.

let initialState = {
  "testerAccount": {
    "videoUploads": [],
    "messages": []
  },
  "customerAccount": {
    "videoUploads": [],
    "messages": []
  },
  "systemUserAccount": {
    "videoUploads": [],
    "messages": []
  }
};

이러한 각 섹션에 대해 비디오 또는 메시지를 추가하기 위해 별도의 감속기를 구현할 때 작업 유형 이름 충돌을 어떻게 피할 수 있습니까?

@gaearon 당신이 제안하는 것은 문제의 핵심을 해결하지 못합니다. 시간이 지남에 따라 많은 문제를 일으키는 거대한 유형의 파일로 끝날 것이기 때문에 덕트 테이프 접근 방식에

코드 병합 중에 곧바로 문제가 발생하며 나중에 이름 지정 해킹으로 해결해야합니다. 예 :

ADD_VIDEO_UPLOAD, ADD_TESTER_VIDEO_UPLOAD, ADD_VIDEO_UPLOAD_IN_SOME_SECTION 등

다시 한 번 큰 골칫거리입니다.

@koulmomo 이것이 바로 제가 찾던 것입니다. 감사합니다 :) : +1 : 간단하고 강력합니다.

@gaearon 이 패키지 나 redux-constant라는 이름의 새 패키지를 사용하는 예제가 하나 이상 있어야한다고 생각합니다.

내 의견으로는 네임 스페이스 문제를 해결하는 문서 / 예제에서 접근 방식을 홍보하는 것이 새로운 기본값이어야합니다.

도와 주셔서 감사합니다 :)

귀하의 예에서 나는 왜 하나의 유형 세트, 하나의 감속기 생성기 및 하나의 액션 생성기 세트가 없는지 이해하지 못합니다. 액션은 그들을 구별하기 위해 accountType 속성을 포함합니다. 액션 제작자는이를 매개 변수로 받아들입니다. 감속기 팩토리는 accountType 수락하고이 계정 유형의 작업 만 처리하는 감속기를 반환합니다.

flux-constant 이 여기에서 훌륭한 솔루션이라고 생각하지 않습니다. instanceof 수표에 의존하는 것 같습니다. 즉, deserialized 유형이 생성 된 유형과 일치하지 않기 때문에 작업을 직렬화하고 나중에 다시 재생할 수 없습니다.

사람들은 종종 Flux 의 필수 기능을 깨뜨리고 있다는 사실을 깨닫지 못한 채 Flux를“단순화”하려고

귀하의 예에서 나는 왜 하나의 유형 세트, 하나의 감속기 생성기 및 하나의 액션 생성기 세트가 없는지 이해하지 못합니다. 작업에는 구분하기 위해 accountType 속성이 포함됩니다. 액션 제작자는이를 매개 변수로 받아들입니다. 감속기 팩토리는 accountType을 수락하고이 계정 유형의 작업 만 처리하는 감속기를 반환합니다.

나는 당신의 예에서 명백한 대칭으로 오해를 받았습니다. 나는 당신이 여기에 DRY가 없다는 것을 의미했으며 기능의 대칭은 https://github.com/rackt/redux/issues/786#issuecomment -142649749에서 말한 것처럼 분명합니다.

여기에 도서관이 필요하지 않다고 생각합니다. 컨벤션을 세우십시오! 예를 들어, 하위 프로젝트 또는 기능이 너무 분리 된 경우 작업 유형 feature/ACTION_TYPE (예 : testers/UPLOAD_VIDEO 또는 customers/UPLOAD_VIDEO 를 호출하는 규칙을 만드십시오. 이 "그룹"이 실제로 디스크의 실제 폴더 (또는 더 나은 패키지)에 해당하는 경우 특히 유용합니다.

위반은 코드 검토에서 쉽게 포착 할 수 있습니다. _ 정말로 _ 원한다면 이것을 자동화 할 수는 있지만 수동 네임 스페이스를 어떻게 가져 오는지 알 수 없습니다. 각 모듈 내에서 기능을보다 쉽게 ​​제어하고 실수로 인한 노력의 중복을 방지하고 문서로 모든 상수를 하나의 파일에 선언하고 싶을 것입니다.

코드 분할, 네임 스페이스 작업 유형 등을 사용하여 huge-apps 예제를 추가합니다. 그래도 별도의 문제입니다.

문자열은 본질적으로 네임 스페이스에 나쁘지 않습니다. URL은 문자열이며 제대로 작동하는 것 같습니다.

@gaearon 맞아요, 플럭스 상수를 기반으로 한 솔루션으로 직렬화 문제를 잊어 버렸습니다.

자체 이름으로 모듈 / 네임 스페이스를 쉽게 구분할 수있는 한 문자열 기반 네임 스페이스에는 문제가 없습니다.

명명 규칙 기반 솔루션은 이전에 본 것입니다.

https://github.com/erikras/ducks-modular-redux

그러나 나는 당신의 경험을 기반으로 할 더 나은 또는 "올바른"방법이 있기를 바랍니다.

플럭스 상수 접근 방식을 실제로 어떤 식 으로든 직렬화 할 수있는 것으로 변환하려고 시도 할 것입니다.

다른 사람들의 시간을 많이 절약 할 수 있고 나중에 쉽게 따를 수있는 일종의 규칙을 수립하는 데 도움이 될 것이므로 시간이 있으면 "거대한 앱"예제를 추가하십시오.

다시 감사합니다 :)

예, 죄송합니다. 안타깝게도 한동안 큰 앱에서 작업하지 않았고, 그럴 때도 실제로 어떤 일이 일어날 지에 대한 좋은 개요를 제공하기 때문에 상수가 섹션으로 그룹화 된 하나의 거대한 파일이 있다는 점이 좋았습니다. 앱에서.

@pbc 체크 아웃 https://gist.github.com/jhewlett/acceb0e84bf043c17b66

이 "문제"가 문서에서 더 자세히 설명되는 것을보고 싶습니다. @pbc와 같은 질문이 있습니다. 나는 "왜 모든 액션 유형을 한곳에서 상수로 유지하지 않는가?"라고 생각하지 않습니다. 여러 프로젝트에서 여러 모듈을 재사용하고 "규칙을 설정하십시오!" CSS 랜드의 BEM과 매우 흡사합니다. 그러나 우리는 BEM에서 CSS 모듈로 이동하고 큰 프로젝트의 액션 유형에도 해시 클래스 이름이 필요한 CSS 모듈과 비슷한 것으로 생각합니다.

내가 말할 수있는 한, 직렬화와 충돌 없음을 모두 달성 할 수있는 방법은 없습니다.

재사용 가능한 모듈에 대한 좋은 규칙은 역 도메인 이름, github의 사용자 이름 / repo 또는 npm의 등록 된 모듈 이름과 같은 기존 "고유 공급자"를 사용할 수 있습니다.

편집 : CSS 모듈은 CSS 위에 사용자 정의 언어를 정의하고 사전 처리 중에 클래스 이름을 접두사로 지정하여이를 수행합니다 (어쨌든 규칙에 따라 생성되지만 생성 된 것임).

질문과 토론에 +1. 나는 또한 @pbc 와 같은 정확한 문제로 많은 어려움을

직렬화 가능한 문자열 작업 유형에 대한 솔루션을 찾은 것 같습니다. 우리 마음이 어떤 것에 인위적인 제한을 가하는 상황 중 하나라고 생각합니다.

기본 아이디어는 유형 상수가 어떤 식 으로든 문자열 값과 관련 될 필요가 없다는 것입니다. 따라서 무작위로 생성 된 값, 해시 된 파일 경로 또는 유형 상수 문자열 값에 대해 고유 한 다른 것을 사용할 수 있습니다. 감속기에서 유형 상수를 이름으로 가져오고 이름으로 비교합니다. 이 이름은 다른 작업 및 다른 감속기에서 사용할 수 있지만 값이 동일하지 않기 때문에 중요하지 않습니다.

예 : https://gist.github.com/samsch/63a54e868d7fa2b6023a

이것은 현명합니다. 여전히 작업 이름에 사람이 읽을 수있는 부분을 유지하고 싶지만 고유 한 접두사를 생성하면 완전히 작동합니다.

물론 그들이 독특하다는 것을 증명할 수 있다면.
가장 좋은 방법은 여전히 ​​기존 고유성 공급자 (역 도메인 이름 또는 npm 모듈 이름)를 사용하는 것입니다.

규칙이있는 네임 스페이스는 모듈을 작성할 때 제어 할 수없는 다양한 장소에서 사용할 수있는 것보다 위험합니다.

ActionType이 "Area"인 "Geometry"모듈이 있다고 가정 해 보겠습니다. 이 모듈은 두 곳에서 사용됩니다.

1. AppA-> Drawing-> Geometry (namespace = "Drawing / Geometry / Area")
2. AppB-> Trigonometry-> Shape-> Geometry (namespace = "Trigonometry / Shape / Area")

이제 모듈이 사용되는 위치에 따라 두 개의 충돌하는 네임 스페이스가 있습니다.

• ActionType "Area"에 대한 Geometry 모듈에서이 전체 경로를 하드 코딩하는 것은 좋지 않습니다.
• 오히려 이름을 단순하게 유지하십시오 : "영역".
• 리듀서 구성과 유사한 방식으로 각 포함 부모가 접두사를 추가하도록하여 네임 스페이스를 구성합니다.

다음 패턴으로 실험하고 있습니다.

다음을 포함하는 각 컬렉션 유형에 대한 dir을 만듭니다.

• consts
• 감속기
• 구성 요소
• 사가

다음 형식으로 const를 만듭니다.

// song-store/song-store-consts.js
export const ADD = 'SONG_STORE.ADD'
export const REMOVE = 'SONG_STORE.REMOVE'

감속기, saga 또는 액션에서 상수를 사용할 때 import 모두 * :

// song-store/song-store-actions.js
import * as SONG_STORE from './song-store-consts'

export function addSongStore(name) {
  return {
    type: SONG_STORE.ADD,
    name
  }
}

export function removeSongStore(songStoreId) {
  return {
    type: SONG_STORE.REMOVE,
    songStoreId
  }
}

슬프게도 나무 흔들기에는 좋지 않습니다. ES6가 허용한다면 좋을 것입니다.

import { ADD, REMOVE } as SONG_STORE from './song-store-actions'

Webpack 2가 지능적으로 import * 트리 쉐이킹 할 수 있는지 누구든지 알고 있으므로 * 가져온 경우에도 사용되지 않는 내보내기 코드를 번들로 제공하지 않습니다.

이것은 매우 일반적인 문제로 보이며 다음과 같은 경우 사무실에서 자주 발생합니다.

• 이름 충돌로 인해 원하지 않는 동작이 발생합니다.
• 고유 한 작업 유형 생성과 관련된 상용구에 대해 불평합니다.

우리는 몇 가지 다른 해결책을 시도했지만 아무것도 붙지 않는 것처럼 보였습니다.

1. 모든 액션 유형을 한곳에 상수로 유지하면 확실히 관리하기가 더 쉬워 지지만 앱이 커지면 조금 다루기가 어려워집니다.
2. @samsch가 언급 한 무작위로 생성 된 값 은 정말 내 관심을 끌었고 확실히 작동하지만 예, 사람이 읽을 수있는 부분을 잃으면 생활하기가 더 어려워집니다.
3. 위의 @philholden 의 의견 은 우리가 일반적으로 기능 중심 아키텍처를 사용하고 디렉토리 구조가 매우 설명 적이기 때문에 저에게 정말

지난 몇 달 동안 실험 한 후 우리는 디렉토리 구조를 사용하여 액션 유형의 네임 스페이스를 지정하기로 결정했습니다. 수동으로 입력하는 것은 정말 빨리 늙어 가기 때문에 __filename 뭔가를 시도했지만 코드 번들링 등으로 인해 작동하지 않습니다. 그런 다음 키워드 __filenamespace 를 변환하는 첫 번째 Babel 플러그인 을 만들었습니다 __filenamespace 를 정적 문자열로 변환하면 잘 작동하는 것 같습니다.

예

App/testerAccount/index.js :

// Something like this
const ADD_VIDEO_UPLOAD = `${__filenamespace}/ADD_VIDEO_UPLOAD`;
const ADD_COMMENT = `${__filenamespace}/ADD_COMMENT`;

// Will be transformed into something like this
const ADD_VIDEO_UPLOAD = 'App/testerAccount/ADD_VIDEO_UPLOAD';
const ADD_COMMENT = 'App/testerAccount/ADD_COMMENT';

자유롭게 사용해보세요. 유용하기를 바랍니다. 특히 이슈 작성자이자 라이브러리 작성자 인 @pbc 또는 @gaearon 으로부터 피드백을받는 것은 환상적 일 것입니다.

https://www.npmjs.com/package/babel-plugin-filenamespace

나는 누군가가 "표준"을 제시하기를 정말로 바라고 있었다. 이를 위해 기호 나 객체가 필요하지 않습니다. 규칙 만 있으면됩니다.

"featureName$actionType" 또는 "fileName/ACTION_TYPE" 또는 "PROJECT.FEATURE.ACTION" 하시겠습니까? 우리 모두가 동의 할 수 있다면 감속기를 공유하는 것이 더 쉬울 것입니다.

다른 사용 가능한 규칙이 부족하여 Ducks 가 사실상의 표준이 된 것 같습니다.

const ACTION = 'app/feature/ACTION'; 충분합니다.

@gaearon 은 항상 액션과 리듀서 사이의 1 : 1 관계가 아마도 나쁜 생각이라고 언급했으며 정말 동의합니다. 그러나 두 개의 다른 뷰가 실제로 동일한 감속기를 호출하려는 경우는 어떻습니까?
예를 들어. 간단한 환경 설정 토글은 두 곳에서 활성화 또는 비활성화 할 수 있습니다.
/ myaccount / toggleNotification
/ dashboard / toggleNotification
따라서 동일한 내용으로 작성된 두 개의 감속기가 있어야합니다.
reducers / notifications.js
참조 : @ samit4me , @philholden

다른 생각으로, 이것은 다른 작업 이름으로 동일한 작업을 수행하는 파일 내에 두 개 이상의 감속기를 갖는 것이 좋은 생각이라고 생각합니다. 이것은 감속기를 보는 것만으로도 얼마나 많은 곳에서 특정 상태가 수정되고 있는지 이해할 수있는 방법입니다.

어쨌든 전문가의 의견을 듣고 싶습니다. 감사.

@ivks : 여기에 몇 가지 생각이 있습니다.

첫째, 응용 프로그램 내의 여러 위치에서 동일한 작업을 전달할 수 있습니다.

둘째, 동일한 감속기가 여러 작업 유형을 수신하고 동일한 방식으로 처리 할 수 ​​있습니다.

셋째, "1 : 1 관계"측면은 각각의 상태 비트를 독립적으로 업데이트하는 동일한 작업을 수신하는 여러 슬라이스 감속기를 가질 수 있다는 것입니다. 예, 대부분의 경우 주어진 작업을 처리하는 감속기가 하나뿐 일 수 있지만 여러 감속기가 응답하는 것은 Redux의 의도 된 사용 사례입니다.

뿡 빵뀨

둘째, 동일한 감속기가 여러 작업 유형을 수신하고 동일한 방식으로 처리 할 수 ​​있습니다.

나는 실제로 redux-actions를 사용하고 있었으며 작업을 수행하는 유틸리티 메소드 combineAction이 있는지 몰랐습니다. 방금 그것을 찾았고 위의 진술은 똑같은 것을 언급합니다. (더 명확 했어야 했어, 미안해)
답장 해주셔서 감사합니다.

나는 Ducks 가 ActionTypes에서 올바르게 정의한다고 생각하지 않습니다.

npm-module-or-app / reducer / ACTION_TYPE 형식의 작업 유형이 있어야합니다.

그 이유는 하나 이상의 리듀서가 하나의 액션을 구독 할 수 있기 때문입니다. @mherodev가 말했듯이 const ACTION = 'app/feature/ACTION'; 이 더 합리적이며 추가로 const ACTION = 'action://app/feature/ACTION'; 작업 에 대한 스키마 를

액션 유형을 식별하기 위해 글로벌 자체 증분 정수를 사용하지 않는 이유는 무엇입니까? 예

let id = 0

function generateActionType (label /* for readability */) {
  id++
  return `app/feature/${id}/${label}`
}

이것에 대해 조금 생각하고, 다른 개발자와 충돌하지 않도록 린트 규칙을 작성하고 있습니다.이 규칙은 디렉토리를 조사합니다 (모든 리듀서가 있고 각 리듀서에는 자체 작업 유형이 상수로 있음).

동일한 값을 가진 두 개의 상수가있는 경우 위반을보고하도록 linting을 계획하고 있습니다.

제안이 있으시면 알려주세요 :)