2016-09-07 2 views
1

내가 다음과 같습니다 몇 가지 코드 한 실행되지 않는 컨테이너의() 내부코드는()

const foo = (bar) => { 
    console.log("here"); 
    return { 
    type: "FOO", 
    bar 
    } 
} 

가 렌더링

console.log(1); 
console.log(this.props.dispatch); 
console.log(foo); 
this.props.dispatch(foo(
    {a: 1, b: 2} 
)); 
console.log(2); 

Chrome에서 볼 수있는 출력은 다음과 같습니다.

1 
<dispatch function> 
<my foo reducer function> 
here 

2이 누락되었습니다. 오류가 발생하지 않으며 리디렉션도없고 아무 것도 발생하지 않습니다. 코드 실행은 dispatch() 호출 후에 중지됩니다.

제안 사항 어떻게 문제를 해결할 수 있을까요? 기록 :

를 들어

+0

나는 왜 그런 말을 할 수 없지만, render event의 중간에 디스패치를 ​​호출하는 것이 잘못되었다고 느낀다. 일반적으로 디스패치는 사용자의 UI 이벤트에 대한 응답으로 발생합니다. 나는 잘못 생각한 것을 빨리 발견 할 수 없었습니다. 단지 생각이었습니다. – GreenAsJade

+1

이제 좀 더 생각해 보겠습니다. 디스패치를 ​​호출하면 반응을 통해 소품을 업데이트하고 다시 렌더링해야합니다. 어쩌면 당신은 렌더링이 완료되기를 기다리는 곳에서 기다림을 기다리고있을 것입니다. 그러나 기다리고 있기 때문에 완료 할 수 없습니다 ... – GreenAsJade

+0

@GreenAsJade 그게 문제였습니다 :) – alexandernst

답변

1

당신은 render()dispatch()를 호출 할 수 없습니다.

(당신의 소품이 업데이트되어 현재의 렌더링 중간에 새로운 렌더링이 요구됩니다.) 자신이 기다리는 전화 끊기가되거나 무한 재귀가 될 것입니다. hangup!)

+0

아마도 흥미로운 각주는 당신이 구성 요소/컨테이너 패턴을 사용한다면 이론적으로'render '에'dispatch'을 사용하지 않을 것입니다. 왜냐하면 컨테이너의'dispatch '과 컴포넌트가 렌더링되기 때문입니다. 나는 이것을 실제로 구현할 수 없었지만, 그것은 다른 날의 화제이다! – GreenAsJade