mapStateToProps에서 상태 변경 함수 호출하기

Question

나는 반응이 빨랐다.이 경우 getVisiblieTodos라는 함수가 mapStateToProps 내부에서 호출되는 예제를 보니 놀랐다. 이 함수는 상태를 변경하기 때문에 감속기에서 호출해야합니까? 간결함을 위해 코드가 "좋은 형태"로 바뀌 었습니까? 일반적으로이 작업을 수행 할 수 있습니까?

내가 REDUX에서이 link

import { connect } from 'react-redux' 
import { toggleTodo } from '../actions' 
import TodoList from '../components/TodoList' 

const getVisibleTodos = (todos, filter) => { 
    switch (filter) { 
    case 'SHOW_ALL': 
     return todos 
    case 'SHOW_COMPLETED': 
     return todos.filter(t => t.completed) 
    case 'SHOW_ACTIVE': 
     return todos.filter(t => !t.completed) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    todos: getVisibleTodos(state.todos, state.visibilityFilter) 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onTodoClick: (id) => { 
     dispatch(toggleTodo(id)) 
    } 
    } 
} 

const VisibleTodoList = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(TodoList) 

export default VisibleTodoList 

Answer 1

에서 코드를 찾고 우리 가게는 응용 프로그램에 필요한 최소한의 데이터를 보유합니다. 기본 데이터에서 파생 된 모든 내용은 즉석에서 계산되어 상점 복제품을 방지하고 상점에서 내용이 변경 될 때 모든 파생 데이터를 다시 계산해야합니다.

표시되는 todos 목록은 저장소의 일부가 아니며 todos 및 visibilityFilter의 목록을 사용하여 계산되므로 getVisibleTodos()은 저장소 상태를 변경하지 않습니다. 이 두 속성에서 파생 된 계산 된 데이터를 생성합니다.

저장소에서 데이터를 가져오고 파생 된 데이터를 계산하는 데 사용되는 함수를 selector이라고합니다. 선택기를 사용하면 파생 데이터가 저장소의 일부가 아니며 필요한 경우 계산됩니다. 또한 계산 오버 헤드를 줄이기 위해 메모 된 선택기를 사용할 수 있습니다.

Answer 2

todos은 감속기의 상태를 기반으로 계산 된 속성이며 상태를 변경하지 않습니다.

하나의 구성 요소에서만 사용되는 리커버리 (대개 selectors)에서 속성을 변환해도됩니다. 다른 구성 요소에 todos을 사용한다고 가정하면 필터링과 같은 다른 구성 요소에서 한 구성 요소를 변경하고 싶지는 않을 것입니다. 이 경우, 그렇게하는 것이 좋습니다.

또한 필요한 데이터 만 저장하는 것이 감속 원인입니다. 더 많은 상태는 앱의 복잡성이 증가하고 새로운 상태를 계산하는 데 더 많은 오버 헤드가 발생합니다.

Answer 3

"switch .. case"블록 또는/및 2 개의 인수가 있기 때문에 getVisibleTodos이 감속기로 표시 될 수 있습니다. 그러나 그것은 규칙이 아닙니다.

redux reducer (정의에 따라)는 dispatched action에 따라 store 상태를 변경하기 때문에 두 개의 인수 (store state + dispatched action)를 취하고 돌연변이가없는 저장소의 새로운 상태를 반환합니다.

getVisibleTodos 여기에는 문자열 (필터)에 따라 배열을 필터링하는 도우미 함수가 있습니다.

또한 filter은 줄이기 액션이 아니며, 렌더링 할 할 일을 결정하는 문자열입니다.

내가 당신에게 동의 할 수있는 것은 이상한 일이며 전체 적용 (감속기, 동작, ...)을 볼 수 있다면 모범 사례인지 아닌지를 결정할 수 있습니다.