Question

我想在handleClick中渲染SimpleModal组件，如何通过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中，渲染函数应返回当前应用程序的外观。就像现在一样。 React将负责更新和呈现等等，只要您使用其中一种方法通知React何时需要重新呈现内容。

一种方法是在应用的根目录上调用React.render。这是最糟糕的方式，但对于小型应用程序并不可怕。只有在你知道自己在做什么的情况下才会被推荐，即便如此，也可能有更好的方法。

接下来是在您的组件中使用setState()。在此之后的某个时间，React将调用该特定组件的render方法。它更加精确，因为并非整个应用都会被重新渲染（尽管您可以通过明智地实施shouldComponentUpdate来停止渲染级联）。

接下来打电话给forceUpdate使用它是非常糟糕的，除非你真的确定你是什么让自己陷入困境。 React-Redux使用它，因为他们确实知道他们正在进入什么。

最后，还有React-Redux，它不是React渲染组件的另一种方式。但是开发人员的新方式。这是迄今为止推荐的做事方式。

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

这需要阅读Redux文档。这是一个漫长而艰巨的过程，可以保证让任何人成为更好的开发者。

在mapStateToProps实施中，了解您传递给组件的状态的哪些部分非常重要。

不要过去通过整个Redux州。如果应用程序中的任何位置发生任何变化，这将导致整个应用程序重新呈现。不太理想。只传递你需要的东西。甚至没有通过儿童组件所需的东西。他们得到了自己的connect。

现在我们继续前进。

您希望handleClick弹出一些内容并将其显示给用户。

方法1：使用alert。它丑陋且超级简单。它提供了糟糕的用户体验，因此不推荐使用。

方法2：使用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>
    );
}

上面的代码还有很多错误。例如，你应该never bind in render。

请注意，模态是一个分开的组件。它从React-Redux获取数据，而不是从父级传递的props获取数据。这意味着，如果任何数据显示更改，则EcommerceApp组件不必负责更新模式。 Redux将负责这一点。实际上还有React-Redux的帮助。而且React，很自然。不一定按顺序。

要回顾一下这里发生了什么：您的render方法告诉React 不弹出什么，但最终结果应该是什么样。这是一个巨大的差异，几乎是 the entire point of React 。

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

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

1 个答案: