javascript - 如何更改此 React(Redux) 组件使其独立运行

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 渲染？

注意.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)

应用程序.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 />
  }

....
}