Question

我已将操作设置为我的组件，如下所示：

actionIndex.js

import { bindActionCreators } from 'redux'
import * as profileActions from './profileActions'
import * as uiActions from './uiActions'
import * as statusActions from './statusActions'
import * as searchActions from './searchActions'
import * as filterActions from './filterActions'


export default function bindActions(dispatch) {
  return (
    bindActionCreators({
      ...profileActions,
      ...uiActions,
      ...statusActions,
      ...filterActions,
      ...searchActions}, dispatch)
  )
}

SomeComponent.jsx

import React from 'react'
import { connect } from 'react-redux'
import actions from '../../actions/actionIndex'

@connect(
  store => {return {...store}},
  dispatch => ({actions : actions(dispatch) })
)
export default class SomeComponent extends React.Component{

我正处于原型设计阶段，因此我一直在努力设置，以便尽可能快地完成工作，而无需处理大量的样板。现在我知道将所有商店数据传递给每个组件都很糟糕，因为它会导致大量不必要的重新渲染。将所有操作传递给与上述类似的组件是否有问题？这允许我通过在组件中使用this.props.actions.someActions()来调用任何已定义的操作，这非常简单，但是有任何重大的性能权衡吗？到目前为止我还没有注意到，但我很好奇是否有人对react和redux有更深入的了解有任何见解。如果将来不会出现可怕的事情，我很乐意继续使用这种方法。

Answer 1

我会将州/行动分为他们的财物。例如，如果您要开发购物车，则可以使用<Cart />和<Products />以及<App />来包装所有内容。

<App>          <--- Inject products && cart state + actions here?? 
 <Products />  <--- Inject products state + cartActions Here
 <Cart />      <--- Inject cart state + cart Actions Here
</App>

虽然您可以同时将products和cart状态注入<App />：

const mapStateToProps = state => ({
  redux: {
    products: state.products,
    cart: state.cart,
  },
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({
    ...productsActions,
    ...cartActions,
  }, dispatch),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

哪个更容易＆＃34;有几个挫折

如果cart状态更新，则会重新呈现<App />。并重新呈现<Products /> + <Cart /> <Cart />不仅<App />考虑将{25}组件放在import { funcionA, functionB, functionC } from '../actions'下，这是您非常希望避免的，25个不必要的重新渲染。

理想情况下，请执行以下操作：

authenticate: function(options) {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: this.tokenEndpoint,
        type: 'POST',
        headers: {'Content-Type': 'application/json', 'Accept-Encoding': 'gzip, deflate'},
        data: JSON.stringify({
          username: options.identification,
          password: options.password
        })
      }).then(function(response) {
            console.log(response) // I get here object with good properties 
            resolve({
                lastLoginDate: response.lastLoginDate,
                login: response.login,
                name: response.name,
                role: response.role,
                token: response.id_token
              });
          }, function(xhr, status, error) {
            if(error !== undefined) {
              console.log(error);
            }

            var response = xhr.responseText;
              reject(response);
          });
    });

仅绑定组件将使用的函数。并单独连接每个容器的状态部分，只使用所使用的状态部分。它取决于你的建设。

将所有操作注入组件有什么问题吗？

1 个答案: