rxjsを使用して反応機能のステートレスコンポーネントの小道具を更新する

Question

私は毎秒新しい小道具を送信して反応（機能的、ステートレス）コンポーネントを持ってそれ自身を更新するために観測可能性を使うことができると考えました。私はここで何が欠けているのか分かりません。ここでjsbin

const propsObs = Rx.Observable.from(['Butler', 'Fritz', 'Dusty', 'Petey']) 
const inte = Rx.Observable.interval(1000).take(4) 
var props={olddog:'Rusty'} 
const propsOverTime = propsObs.zip(inte, (aprop,intx)=>aprop) 
propsOverTime.subscribe((x)=>{ 
    props={...props, olddog:x} 
    console.log(props) 
}) 

const App = (props) =>{ 
    console.log(props.olddog) 
    const getDog=()=>props.olddog 
    const thedog = getDog() 
    return(
    <div><h4>hello {thedog}</h4></div>) 
} 
ReactDOM.render(<App {...props}/>, document.getElementById('app')) 

だ観察可能な変更は、毎回、新しい小道具オブジェクトを作成し、毎秒小道具。コンポーネントの再レンダリングを強制するのに十分なはずですか？

Answer 1

機能的な成分はまさにその機能です。それは自分自身の小道具を「見ている」わけではありません。上流の何かが新しいJSXを得るためにあなたの関数を呼び出さなければなりません。 React.Componentを含む同梱コンポーネントがある場合は、setStateと呼び出して新しい小道具を渡すか、場合によっては、更新されたJSXでReactDOM.renderと呼ぶことができます。

const App = props => { 
    const getDog =() => props.olddog 
    const thedog = getDog() 
    return(
    <div><h4>hello {thedog}</h4></div> 
) 
} 

propsOverTime.subscribe(x => { 
    props = {...props, olddog: x} 
    ReactDOM.render(<App {...props}/>, document.getElementById('app')) 
})