Redux 작업의 유형을 정의하는 올바른 방법은 무엇입니까?

Question

상태 관리를 위해 Redux를 사용하는 응용 프로그램이 있으며 Flow 유형 주석을 추가하려고합니다.

여기에 제가 중점적으로 다루는 매우 간단한 테스트 사례가 작성되었습니다.

노조 Action 유형을 만든 다음 감속기 기능 내에서 type 속성에 따라 반환 할 상태를 결정하기 위해 switch을 사용하고 있습니다. switch 문을 사용할 때마다 내 action 매개 변수에서 다른 속성에 액세스하고 있습니다.

Flow가 action 인수에서 특정 속성을 찾을 수없는 이유를 이해할 수 없습니다. 모든 것이 제대로 정의 된 것처럼 보이고 여기서 잘못된 것을 실제로 볼 수 없습니다.

:

https://flowtype.org/try/#0C4TwDgpgBAggxsAlgewHZQLxQFBSgHygG8pRIAuKAcgDEBJAJQGUAVKgGigBMBDYHygHkARgCsICKAF9cBYqXARKVJgFEAwoIByAEQ5REwCAFs6XSgGdgAJ0SoA5tOzYy0JvyOZisgDaIrlDDW1jwgADwi4ggAfOzYMtgAZgCuqAgo6NYQXMlwEAAUVnxKUO7FnDzpaIFVqACUlKjJxsIQ1t54FgDuhnAAFlD5lUhoAHSudR14UHA8FtC0jKxUlESy01BZwMnW6EVGo35Wo4l2XHSoXBAAHvmGJpjRBkbGo4hcmBhYwxmjvPxvLh1ADc6ycG1m82oak0uhWUw2Wx2ew8EEO-mAJzOFyut3uxkezxMgM+31qbxeZhBYJkGyuiR4yR8wHIYLwSN2UAADKC8DIpEA

내가 아마 문제가 switch 문을 사용하여 관련 된, 그래서 여기에 같은 문제에 if를 사용하여 버전의 생각 :

여기 내 테스트 케이스의 https://flowtype.org/try/#0C4TwDgpgBAggxsAlgewHZQLxQFBSgHygG8pRIAuKAcgDEBJAJQGUAVKgGigBMBDYHygHkARgCsICKAF9cBYqXARKVJgFEAwoIByAEQ5REwCAFs6XSgGdgAJ0SoA5tOzYy0JvyOZisgDaIrlDDW1jwgADwi4ggAfOzYMtgAZgCuqAgo6NYQXMlwEAAUVnxKUO7FnDzpaIFVqACUlKjJxsIQ1t54iIlQ+ZVIaAB0rpgYWLSMrFR1HXhQWcDJ1uhFRgN+VgOJdlx0qFwQAB75hiaY0QZGxgOIXCNYfRkDvPzXXHUA3LIyeLJdPQ+DYajMZqTS6KYzPDzRbLDwQNb+YCbba7fZHE7GM4XEyvO5QAGoa6XMwfL6yWTQpZQAAMnykQA

Answer 1

먼저 reduce 기능이 유효한 감속원. REDUX 감속기는

(state: State, action: Action) => State 

흐름 개선 (이론적으로는 콜백에서 action.data 참조를 변경할 수)에 대한 비관적 인 다음 서명이 있어야합니다. 흐름은 정제를 유지하는 데 도움이되는 방법은 바인딩 const를 더 나은 IMO (docs)

function reduce(state: State, action: Action): number { 
    switch (action.type) { 
    case 'FIRST': 
     const data = action.data; 
     return state.list.findIndex(item => item.id === data.id); 
    case 'SECOND': 
     const itemId = action.itemId 
     return state.list.findIndex(item => item.id === itemId); 
    default: 
     return 0; 
    } 
} 

이상을 사용하는 것입니다,

function findIndex(state: State, id): number { 
    return state.list.findIndex(item => item.id === id); 
} 

function reduce(state: State, action: Action): number { 
    switch (action.type) { 
    case 'FIRST': 
     return findIndex(state, action.data.id) 
    case 'SECOND': 
     return findIndex(state, action.itemId) 
    default: 
     return 0; 
    } 
} 

또한 여러 도우미 기능으로 케이스를 분리, 당신은 찾을 수 있습니다 redux repo에서 flow-typed 앱의 예 (examples/todos-flow 참조)