Simplest Redux 예제에 곱셈 감속기 추가

one of react-redux's official hello world example이 주어지면 multiply 감속기를 어떻게 구현합니까? 그들은 두 개의 숫자를 더하는 감속기를 구현하지만 입력이 승수 인 감속기를 보는 것도 유익합니다. 나는 이것이 아주 기본적인 것임을 알고 있지만 그것은 다른 프로젝트의 나의 분해 된 버전이다.Simplest Redux 예제에 곱셈 감속기 추가

const MULTIPLY_ACTION = 'MULTIPLY_ACTION' 
    function multiplyAction(integer) { 
    return { 
     type: MULTIPLY_ACTION, 
     integer 
    } 
    } 

export function multiplier(state = { integer: 0 }, action) { 
    switch() { 
    case MULTIPLY_ACTION: 
     console.log('multiplying', action) 
     return { 
     multiple: state.integer * action.multiplier 
     } 
    default: 
     return state 
    } 
}

문제 난으로 실행하고 있습니다 :

리팩토링과 mapStateToProps을() 여러 감속기 작업

은 여기 내이 작품을 만들기를 시도합니다. 내가 뭘 놓치고 있니? [아래의 리팩토링 참조]
increaseAction 리터럴을 함수 (작업 유형?)로 리팩토링합니다. 원래 예에서, const increaseAction = { type: 'increase' }을 const increaseAction =() => {type: 'increase'}으로 리팩터링하는 순간 카운터 감속기가 더 이상 호출되지 않고 내 앱이 자동으로 실패합니다 (빌드로 create-react-app을 사용하고 있습니다).

[refactor].

function mapStateToProps(state) { 
    const { increaseAction, multiplyAction } = state 

    return { 
    increaseAction, 
    multiplyAction 
    } 
}

많은 감사를드립니다!

출처

2016-08-12 urubuz

우선, 귀하의 감속기가 귀하의 감속기에 객체로 전달되므로 귀하가 정의한 객체 모양으로 작업해야합니다. 예를 들어, MULTIPLY_ACTION 유형을 갖도록 조치를 정의하고, 특성 단`구.을 사용하여 정수라는 특성을 정수 매개 변수의 값으로 설정합니다.

그러므로 감속기는 유형에 따라 전환해야합니다 (예 : action.type 대신 switch 문에 빈 표현식이 있음). action.integer을 사용해야합니다.

그런 다음 감속기는 전체 응용 프로그램 상태 개체를 나타냅니다. 지금은 그 상태 조각의 기본 모양을 값이 0 인 integer이라는 속성을 가진 개체로 정의합니다. case 작업이 기본 상태 개체와 동일한 모양을 반환하기를 원할 경우, integer이라는 단일 속성을 가진 개체 즉, 감속기는 항상 동일한 객체 모양을 반환해야합니다 (속성이 다르거 나 응용 프로그램에 유효한 값인 경우 null 일 수도 있습니다. 정의되지 않았 음).

감속기에 문제가있을 수 있습니다.

return { integer: state.integer * action.integer }

은 지금까지 당신의 연결 기능으로, mapStateToProps가 당신의 국가 (안 당신의 행동)의 인식, 그래서 그것은 단순히 당신이 원하는 상태의 부품을 반환 할 필요가 : 그 말한다. 액션과 관련된 두 번째 매개 변수 인 mapDispatchToProps입니다.

connect(
    state => ({ 
    multiplierInteger: state.multiplier.integer // remember that you are looking within your reducer multiplier which contains an object that has the field you want, integer 
    }), 
    dispatch => ({ 
    multiplyAction(val) { 
     dispatch(multiplyAction(val)) 
    } 
    }) 
)

편집 : 그래서 당신은 뭔가를 원하는 것 그것은 당신이 여러 감속기에 액세스 할 수 mapStateToProps 사용에 대한 요구 된 것을 볼 지금은 당신의 '리팩터링을'오해 것을, 그리고 수 있습니다. 그럼에도 불구하고 내 사례가 도움이 될 수 있다고 생각합니다. 관련 작업의 이름으로 감속기의 결과에 액세스하려고했기 때문입니다. 원하는 것은 reducer 자체의 이름을 사용하는 것입니다. combineReducers를 사용한다고 가정하면 Redux가 많은 reducer를 단일 상태 객체에 매핑하는 방법입니다.

출처

2016-08-12 22:40:51 John

Simplest Redux 예제에 곱셈 감속기 추가

답변

관련 문제