Question

我学习了React Redux并遇到了一些问题。

在下面的代码中，我执行mapStateToProps来监听更改，并使用mapDispatchToProps发送通知。 Store中发生更改时，我会发送通知。为了使其正常工作，我必须将此Helper放入App.jsx render()方法中，甚至执行以下Helper这个组件代码也不会向App.jsx添加任何内容。我学习了React，并想知道如何更改此Notefication.js，使其能够监听mapStateToProps，并且可以执行mapDispatchToProps而无需将其添加到App.jsx render()中。

感觉只需要使mapStateToProps mapDispatchToProps正常工作而不必将此组件添加到App.jsx呈现器中是没有必要的？

Notefication.js

   import { connect } from "react-redux";
import 'react-redux-notify/dist/ReactReduxNotify.css';
import { createNotification, NOTIFICATION_TYPE_SUCCESS } from 'react-redux-notify';
import { Notify } from 'react-redux-notify';
import React, { Component } from "react";

const mySuccessNotification = {
  message: 'You have been logged in!',
  type: NOTIFICATION_TYPE_SUCCESS,
  duration: 0,
  canDismiss: true,
  icon: <i className="fa fa-check" />
}

class Helper extends Component {

  senNotification() {
    const { createNotification } = this.props;
    createNotification(mySuccessNotification);
  }
  render() {
    return (
      <div>
        <Notify />
        {this.senNotification()}
  </div>
    )
  }
}

const mapDispatchToProps = dispatch => ({
  createNotification: (config) => {
    dispatch(createNotification(config))
  },
})

const mapStateToProps = state => {
  return { badword: state.rootReducer.badword };
};

export default connect(mapStateToProps, mapDispatchToProps)(Helper)

App.jsx

import React, { Component } from "react";
import List from "./List.jsx";
import Form from "./Form.jsx";
import Helper from "../components/Notification";
class App extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        const { addToast } = this.props.actions;
        addToast({ text: "Hello, World!" });
    }

    render() {
        return (
            <main>
                <div className="row mt-5">
                    <div className="col-md-4 offset-md-1">
                        <h2>Articles</h2>
                        <List />
                    </div>
                    <div className="col-md-4 offset-md-1">
                        <h2>Add a new article</h2>
                        <Form />
                    </div>
                </div>
                <Helper/>
            </main>
        );
    }
}

export default App;

Answer 1

React仅在组件值更改时渲染新的。因此，如果连接了reducer并加载了一些更改的值，则将渲染组件并触发功能。

我不会在渲染函数中触发函数this.senNotification，而是希望使用componentDidUpdate来触发函数。

import { connect } from "react-redux";
import 'react-redux-notify/dist/ReactReduxNotify.css';
import { createNotification, NOTIFICATION_TYPE_SUCCESS } from 'react-redux-notify';
import { Notify } from 'react-redux-notify';
import React, { Component } from "react";

const mySuccessNotification = {
  message: 'You have been logged in!',
  type: NOTIFICATION_TYPE_SUCCESS,
  duration: 0,
  canDismiss: true,
  icon: <i className="fa fa-check" />
}

class Helper extends Component {
  componentDidUpdate (prevProps) {
    const { createNotification, badword } = this.props

    if(prevProps.badword !== badword) {
       this.senNotification()
    }

  }

  senNotification() {
    const { createNotification } = this.props;
    createNotification(mySuccessNotification);
  }
  render() {
    return <Notify />
  }

....
}

如何更改此React（Redux）组件，使其独立工作

1 个答案: