セレクターとバインディングの使用を理解できない

Question

私はreactjsとreduxコースを練習しています。私は反応部分を理解しているだけでなく、還元することもできますが、以下のコードで行われるセレクタとバインディングの知識は理解できませんでした。ここ

コード

const reducer = (state = 1, action) => { 
    switch (action.type) { 
    case 'INCREASE': 
     return state + 1; 
    default: 
     return state; 
    } 
} 

const selectCounter = state => state; 

const AppPresentation = ({ text, onClick }) => (
    <button onClick={onClick}>{text}</button> 
); 

const App = connect(
    (state, { bindings: { selectText } }) => ({ text: selectText(state) }), 
    dispatch => ({ onClick() { dispatch({ type: 'BUTTON_CLICKED' }); }}) 
)(AppPresentation) 

const onClickIncrease = function*(){ 
    while (yield take('BUTTON_CLICKED')) 
    yield put({ type: 'INCREASE' }); 
} 

const saga = createSagaMiddleware(); 
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 

const store = createStore(reducer, composeEnhancers(applyMiddleware(saga))); 
saga.run(onClickIncrease); 

ReactDOM.render(
    <Provider store={store}> 
    <App bindings={{ selectText: selectCounter }} /> 
    </Provider>, 
    document.querySelector('#app')); 

セレクタとバインディングが行われていない上のコード以下、上記のコードの利点は何ですか？

const reducer = (state = 1, action) => { 
    switch (action.type) { 
    case 'INCREASE': 
     return state + 1; 
    default: 
     return state; 
    } 
} 

const selectCounter = state => state; 

const AppPresentation = ({ text, onClick }) => (
    <button onClick={onClick}>{text}</button> 
); 

const App = connect(
    state => ({ text: selectCounter(state) }), 
    dispatch => ({ onClick() { dispatch({ type: 'BUTTON_CLICKED' }); }}) 
)(AppPresentation) 

const onClickIncrease = function*(){ 
    while (yield take('BUTTON_CLICKED')) 
    yield put({ type: 'INCREASE' }); 
} 

const saga = createSagaMiddleware(); 
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 

const store = createStore(reducer, composeEnhancers(applyMiddleware(saga))); 
saga.run(onClickIncrease); 

ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.querySelector('#app')); 

誰でも簡単な英語の説明でわかりますか？ :)申し訳ありません私の英語は貧しいです。

Answer 1

mapStateToPropsがownPropsが2番目の引数として指定されているmapStateToProps(state, [ownProps])

場合follwoing構文を持ち、その値は、あなたのコンポーネントに渡さ小道具になり、mapStateToPropsはさらにコンポーネントが新しい小道具を受信するたびに再起動されます（たとえば、親コンポーネントから受信した小道具が浅く変更されている、とあなたはownProps引数を使用している場合、mapStateToPropsは親コンポーネントから渡された小道具を受け取ることになりますあなたのケースでは{ bindings: { selectText } }）

を再評価され

最初のコードでのような小道具を<App bindings={{ selectText: selectCounter }} />に送っています。これはmapStateToPropsコンポーネントで受け取りますが、2番目のコードではそのようなpropをコンポーネントに渡していません。したがって、第1の方法は、小道具を子に渡し、小道具が変更されたときに子供の値を更新できるように、2番目の方法よりも利点があります。