我想在handleClick中渲染SimpleModal组件，我如何通过Redux实现它

Question

我想在handleClick中渲染SimpleModal组件，我如何通过redux实现它

我可以这样做吗?//ReactDOM。呈现(,. 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中，你的渲染函数应该返回应用程序当前的样子。就像现在一样。React会负责更新和渲染等等，只要你使用其中一种方法来通知React何时需要渲染某些内容。

一种方法是在应用程序的根目录上调用React.render。这是最糟糕的方法，但对于小应用程序来说并不可怕。只有当你知道自己在做什么时才推荐使用，即使这样，也可能有更好的方法。

下一步是在组件中使用setState()。React将在之后的某个时间调用该特定组件的render方法。它更精确，因为不是你的整个应用程序被重新渲染(尽管你总是可以通过明智地实现shouldComponentUpdate来停止渲染级联)。

下一步是调用forceUpdate，除非你真的确定你要进入的是什么，否则使用它是很糟糕的。React-Redux使用这个是因为他们知道他们要进入的是什么。

最后，还有React- redux，这并不是React渲染组件的另一种方式。但是它是开发人员的一种新方法。到目前为止，这是推荐的方法。

要使用它，您只需按照connect规定的方法将您的Redux状态转换为组件的道具。

这需要阅读Redux文档。这是一个漫长而艰苦的过程，但却保证会让每个人都成为更好的开发人员。

在您的mapStateToProps实现中，非常有选择性地将状态的哪些部分传递给组件是很重要的。

不要只是去通过整个Redux状态。如果你的应用中的任何地方发生了任何改变，这将导致你的整个应用呈现。只通过你需要的。甚至不要传递子组件需要的东西。他们有自己的connect。

现在我们向前和向前。

你想让handleClick弹出一些东西并显示给用户。

方法一:使用alert。它很丑，而且超级简单。它提供了一个糟糕的用户体验，所以不推荐使用。

方法二:使用React-Redux。dispatch一个动作，使你的reducer把一些数据放在状态，让你的应用程序知道显示数据。看起来你已经在这么做了!

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

上面的代码仍然有很多错误。例如，你不应该在渲染中使用bind。

请注意，模态是一个独立的组件。它从React-Redux获取数据，而不是从父类传递的props获取数据。这意味着你的EcommerceApp组件不必负责更新模态，如果它显示的任何数据的变化。Redux会处理的。当然是在React-Redux的帮助下。当然还有React。不一定是这个顺序。

来回顾一下这里发生的事情:您的render方法告诉React 不是弹出什么，而是最终结果应该是什么。这是一个巨大的差异，几乎是React的全部意义。

你永远不要告诉React什么改变了。你总是告诉它最终的结果应该是什么样子。然后React会找出发生了什么，并会找到一个有效的方式来显示它在浏览器窗口或电子或nw.js桌面应用程序或本机移动应用程序或任何其他地方React worx。