Redux --I want to render SimpleModal component in handleClick , how can I achieve it through redux

Question

I want to render SimpleModal component in handleClick , how can I achieve it through redux

can I do this way?? //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'));

Your question needs to be cleaned up or it will be down voted and/or deleted. It's not at all clear what you're asking. — DDS, Nov 08 '16 at 02:22

score 0 · Accepted Answer · edited May 23 '17 at 12:08

In React, your render function should return what the app looks like currently. As in right now. React will take care of updating and rendering and so forth as long as you use one of the methods to inform React when it needs to rerender something.

One method is to call React.render on the root of your app. This is the worst way, but not terrible for small apps. Only recommended if you know what you're doing and even then there are probably better methods.

The next is to use setState() in your component. React will call that particular component's render method sometime after that. It's much more precise in that not your entire app gets rerendered (although you can always stop the rendering cascade by implementing shouldComponentUpdate judiciously).

Next is to call forceUpdate which is terrible to use unless you are really sure of what it is you're getting yourself into. React-Redux uses this because they do know what they're getting into.

And finally, there's React-Redux, which isn't really another way for React to render your component. But it is a new way for the developer. This is by far the recommended way to do things.

To use it, you just follow the connect prescribed method for transforming your Redux state into props for your component.

This requires reading the a Redux docs. It's a long and arduous process that is guaranteed to make anyone a better developer.

In your mapStateToProps implementation it's important to be very selective with what parts of the state you pass along to your component.

Don't just go and pass the entire Redux state. This would cause your entire app to rerender if anything at all changed anywhere in your app. Less than optimal. Only pass what you need. Don't even pass what child components need. They get their own connect.

Now onwards and forwards we go.

You want handleClick to pop up some stuffs and show it to the user.

Method 1: Use alert. It's ugly and super simple. It provides a terrible user experience so it's not recommended.

Method 2: Use React-Redux. dispatch an action that causes your reducer to put some data in the state that lets your app know to show the data. Looks like you are already doing that!

Redux will then inform React-Redux that something has changed.

React-Redux will then check if any of your components use the information in the state that was just changed. It knows what you use because this is what you returned from your mapStateToProps function.

React-Redux will then tell React to rerender any of the components that it finds need updating.

When your component's render method gets called, you'll get the new info in the props. So do:

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>
    );
}

There's still plenty wrong with the above code. You should, for instance, never bind in render.

Note that the modal is a component apart. It gets its data from React-Redux and not from props passed by the parent. This means your EcommerceApp component does not have to be responsible for updating the modal if any data it's displaying changes. Redux will take care of that. Actually with React-Redux's help of course. And React, naturally. Not necessarily in that order.

To recap what's going on here: Your render method tells React not what to pop up, but what the final result should look like. This is an enormous difference and pretty much the entire point of React.

You never tell React what changed. You always tell it what the final result should look like. React will then go and figure out what happened and will find an efficient way to show it in your browser window or electron or nw.js desktop app or native mobile app or anywhere else React worx.

Redux --I want to render SimpleModal component in handleClick , how can I achieve it through redux

1 Answers1