Reduxの--IはhandleClickでSimpleModalコンポーネントをレンダリングしたい、どのように私はhandleClickでSimpleModalコンポーネントをレンダリングしたいReduxの

Question

を通してそれを達成することができ、どのように私はReduxの

を通してそれを達成することができ、私はこの方法を行うことができます？ //ReactDOM.render（、document.getElementById（ "123"））;

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom' 
import Redux,{createStore,combineReducers } from 'redux'; 
import SimpleModal from './modal.js'; 
import {Provider, connect} from 'react-redux'; 

import {displayItems} from './reducers.js'; 

const ecommerceAppReducer = require('./reducers.js').default; 

const store = createStore(ecommerceAppReducer); 

のconst EcommerceApp = React.createClass（{

componentDidMount(){ 

store.dispatch({ 
      type: 'LIST_DATA', 
      id: 12 
     }); 
}, 



handleClick: function(entity){  
this.props.dispatch({ 
     type: 'DISPLAY_INFORMATION', 
     entity:entity 

    }); 

**Want to render a SimpleModal here** 

}, 

    render() { 

    return (

    <div> 

     <ul>{ 
       this.props.state.displayItems.map(function(e) {   
      return <li><a onClick={this.handleClick.bind(this,e) }>{e.name}</a></li> 
      }.bind(this)) 
     } 
     </ul> 
    </div> 

    ); 
    } 
}); 

const mapStateToProps = function (state) { 
    return {state}; 
} 

const Eapp = connect(mapStateToProps)(EcommerceApp); 

class App extends React.Component { 
    render() { 
    return (
     <Provider store={store}> 
     <Eapp /> 
     </Provider> 
    ) 
    } 

} 

ReactDOM.render(<App />, document.getElementById('root')); 

Answer 1

では反応して、あなたのレンダリング機能は、アプリが今のように。現在、どのように見えるかを返す必要があります。リアクト更新およびレンダリングの世話をしますあなたが何かを再レンダリングする必要があるときにReactに通知するためにメソッドの1つを使用する限り、他の方法を使用することができます。

1つの方法は、アプリケーションのルートでReact.renderを呼び出すことです。これは最悪の方法ですが、あなたが知っている場合にのみ推奨されますあなたがやっていること、さらにはおそらくもっと良い方法があります。

次に、コンポーネントにsetState()を使用します。 Reactはその後、その特定のコンポーネントのrenderメソッドを呼び出します。 shouldComponentUpdateを賢明に実装することによって、レンダリングカスケードをいつでも停止することはできますが、アプリ全体が再レンダリングされないという点で、はるかに正確です。

次に、forceUpdateに電話するのは、本当にあなたが自分自身になっているのか分からない限り、使いにくいです。 React-Reduxは、彼らが何を得ているのかを知っているので、これを使用します。

最後にReact-Reduxがあります。これはReactがコンポーネントをレンダリングする別の方法ではありません。しかし、それはは開発者のための新しい方法です。これははるかに推奨される方法です。

これを使用するには、connect規定の方法に従って、Reduxの状態をコンポーネントの小道具に変換します。

これには、Reduxドキュメントを読む必要があります。それは、誰かをより良い開発者にすることが保証されている、長くて厄介なプロセスです。

mapStateToProps実装では、コンポーネントのどの部分を渡すかを非常に選択することが重要です。

Redux状態全体を渡すだけではいけません。これにより、アプリ内のどこでも変更されたものがあれば、アプリ全体が再レンダリングされます。最適ではありません。必要なものだけを渡す。子コンポーネントに必要なものを渡さないでください。彼らは自分自身connectを取得します。

今度は転送して行きます。

​​にいくつかのものをポップアップしてユーザーに表示します。

方法1：alertを使用してください。それは醜いとスーパーシンプルです。ひどいユーザーエクスペリエンスを提供しますので、お勧めしません。

方法2：React-Reduxを使用します。 dispatchあなたのアプリがデータを表示することを知らせる状態にあなたの減速機がいくつかのデータを入れるアクション。あなたはすでにそれをやっているように見えます！

Reduxは、React-Reduxに何か変更があったことを通知します。

React-Reduxは、変更されたばかりの状態の情報を使用しているコンポーネントがあるかどうかを確認します。これはあなたのmapStateToProps機能から返されたものなので、使用するものを知っています。

React-ReduxはReactに、更新が必要なコンポーネントを再レンダリングするように指示します。

コンポーネントのレンダリングメソッドが呼び出されると、propsに新しい情報が表示されます。そう：

render() { 
    return (
    <div> 
     {Boolean(this.props.modalOpen) && <MyConnectedModal />} 
     <ul>{ 
     this.props.displayItems.map(function(e) {   
      return <li key={e.name}><a onClick={this.handleClick.bind(this, e) }>{e.name}</a></li> 
      }.bind(this)) 
     } 
     </ul> 
    </div> 
    ); 
} 

上記のコードにはまだ多くの問題があります。たとえば、never bind in renderとする必要があります。

モーダルは、離れたコンポーネントであることに注意してください。それはReact-Reduxからデータを取得し、親が渡した小道具からは取得しません。これは、あなたのEcommerceAppコンポーネントが、表示されているデータが変更された場合、モーダルを更新する責任を負う必要がないことを意味します。 Reduxがそれを処理します。実際にReact-Reduxの助けを借りて実際に。自然に反応する。必ずしもその順序ではありません。ここで何が起こっているのかおさらいし

：あなたのrender方法ない何ポップアップ表示するが、何最終結果はようになっているはずで反応伝えます。これは非常に大きな違いで、かなり多くです。the entire point of React

何が変更されたかを決して伝えません。最終結果がどのように見えるかは、常にあなたに伝えます。 Reactは次に何が起きたのかを把握し、ブラウザウィンドウや電子またはnw.jsデスクトップアプリケーションやネイティブモバイルアプリなど、他の場所でそれを表示する効率的な方法を見つけるでしょう。