ReactJs：listenAndPromise 不是函数

Question

我的项目文件结构

App.jsx

import React, { Component } from 'react';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { Router, Route ,browserHistory} from 'react-router';
import Header from './components/header';
import PreLoginHeader from './components/pre_login_header';
import BrandManagerForm from './components/brand_manager_form';
import Home from './pages/home';
import Internships from './pages/internships';
import PostNewInternship from './pages/post_new_internship';
import Applications from './pages/applications';
import Support from './pages/support';

require('./util/config-reflux')();

class App extends Component {
    componentDidMount(){

    } 
    render() {
        const history = new createBrowserHistory();
        return (
            <div style={{height:'100%',width:'100%'}}>
                {
                    this.checkLoggedIn() ? <Header history={history} /> : <PreLoginHeader />
                }
                <Router history={history}>
                    <Route path='/' component={Home} />
                    <Route path='/internships' component={Internships} />
                    <Route path='/register' component={BrandManagerForm} />
                    <Route path='/register/complete' component={BrandManagerForm} />
                    <Route path='/post-new-internship' component={PostNewInternship} />
                    <Route path='/applications' component={Applications} />
                    <Route path='/messages' component={Internships} />
                    <Route path='/messages/:id'  component={Support} />
                    <Route path='/messages/:id/edit'  component={PostNewInternship} />  
                     {/*  IT'S THE SAME VIEW AS Internships.NOT TO BE CONFUSED WITH NAME*/}
                </Router>
            </div>
        )
    }
    checkLoggedIn = () => {
        if (localStorage.getItem('loggedIn'))
            return true
        return false
    }
}
export default App;

配置-reflux.jsx

var Reflux = require('reflux');
var RefluxPromise = require('reflux-promise');

module.exports = function() {
    // Uses the user agent's Promise implementation
    Reflux.use(RefluxPromise(window.Promise)); // eslint-disable-line new-cap
};

Support.jsx

/* eslint-disable */
import React,{Component} from 'react'
import '../assets/styles/support.css'
import request from 'request'
import Breadcrumb from 'react-breadcrumb'
import moment from 'moment'
import Loader from '../components/loader'
import supportAction from '../actions/supportAction'

class Support extends Component {
    constructor(props){
        super(props)
        this.base_url = process.env.REACT_APP_API_URL;
        this.state = {
            message : '',
            messages:[]
        }
    } 
    componentDidMount(){
        if (!this.checkLoggedIn()){
            window.location = '/'
        }
        const that = this;
        var buffer_id = this.props.params.id;
        this.setState({buffer_id:buffer_id},function(){
            this.fetchData()
        })
        var data = null
        request.get({
            url:`${this.base_url}/internshipbuffer/${buffer_id}`,
            headers:{
                'Authorization':`Bearer ${localStorage.getItem('auth-token')}`
            }
        },function(err,resp,body){
            data = JSON.parse(body)

            data.benefits = data.benefits.split('\n')
            that.setState({data:data})
        })

    }
    updateData = (result) => {
        console.log(result)
    }
    fetchData = () => {
        var params = {
            'internshipbuffer':this.state.buffer_id
        }
        supportAction.getMessage(params).then(this.updateData)
    }
    getMessage = (next) => {
        const that = this; 

        var url = `${this.base_url}/internshipbuffer/getChat?internshipbuffer=${this.state.buffer_id}`;
        if (next){
            url = `${this.base_url}/internshipbuffer/getChat?internshipbuffer=${this.state.buffer_id}&sort={"createdAt":-1}`
        }
        request.get({
            url:url,
            headers : {
                "Authorization":`Bearer ${localStorage.getItem('auth-token')}`
            }
        },function(err,resp,body){
            var body = JSON.parse(body)
            console.log(body);
            if (body){
                var messages = that.state.messages
                if (next){
                    messages = messages.concat(body.data.reverse())
                }
                else{
                    messages = body.data.reverse()
                }

                that.setState({messages:messages,messages_next:body.next})
            }
        })
    }    
    render(){
        return (
            <div className="support-main">
                {this.state.data ? this.renderContent() : this.renderLoading()}
            </div>
        )
    }
    checkLoggedIn = () => {
        if (localStorage.getItem('loggedIn') ){
            return true ;
        }
        return false;
    }
    renderLoading = () => {
        return (
            <Loader />
        )
    }
    renderContent = () => {
        const that = this;
        var data = this.state.data;
        return (
            <div className="support-main-container">
                <Breadcrumb 
                    path={
                            [
                                {
                                    path: '/messages',
                                    label: 'Messages '
                                },
                                {
                                    path: `/pending/${this.props.params.id}`,
                                    label: ` ${data.title}`
                                }
                            ]
                        }
                    separatorChar={' > '}    

                /> 
                <div className="card">
                    <div className="img-container">
                        <img alt={null} src={data.asseturl} id="support-brand-logo" width="50"/>
                    </div>
                    <ul className="card-brand-info-container">
                        <li className="bold">{localStorage.getItem('brand_name')}</li>
                        <li>Brand manager : {localStorage.getItem('brandmanager_name')}</li>
                    </ul>
                    <button onClick={this.editInternshipAction} className='support-edit-btn'>EDIT</button>
                    <div className="support-main-info">
                        <div> <span className="bold">Title</span> : {data.title}</div>
                        <div><span className="bold"> Description</span> : {data.description}</div>
                        <div><span className="bold"> Positions</span> : {data.positions}</div>
                        <div><span className="bold">Intenship Period</span>  : {data.period} </div>
                        <div>
                            <span className="bold"> Benefits </span>:
                            <ul className="benefits-list">
                                {data.benefits[0]}
                            </ul>
                        </div>
                        <div>
                            <span className="bold"> Skills & Requirements</span> :
                            <ul className="skills-list">
                                {data.requirements}
                            </ul>
                        </div>
                        <div>
                            <span className="bold"> City : </span>
                            <ul className="city-list">
                                {
                                    data.citiesvalid.map(function(item,i){
                                        if (i !== (data.citiesvalid.length)-1)
                                            return <li key={i} >{item},</li>
                                        else
                                            return <li key={i} >{item}</li>

                                    })
                                }
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="messages-container">
                    {
                        this.state.messages ? 
                        this.state.messages.map(function(obj,i){
                            var messenger;
                            obj.brandmanager ? messenger = localStorage.getItem('brand_name') : messenger = 'Support'
                            return (that.renderMessage(obj.message,messenger,i,obj.createdAt))
                        }) : null
                    }
                </div>
                <div className="message-input-container">
                    <input className="prefix-messenger" placeholder={`${localStorage.getItem('brand_name')} :`} />
                    <input className="main-message" value={this.state.message} onChange={this.setMessage} />           
                </div>   
                <button onClick={this.sendMessage} className="messages-send-btn"><i style={{marginRight:'5px'}} className="fa fa-paper-plane" aria-hidden="true"></i>Send</button>                
            </div>
        )
    }
    editInternshipAction = () => {
        this.props.router.push(this.props.location.pathname+'/edit')
    }
    renderMessage = (message,messenger,i,message_date) => {
        var data = this.state.data;
        return (
            <div key={i} className="support-message-box">
                <hr />

                <div className="img-container-message">
                    <img alt={null} src={data.asseturl} id="support-brand-logo" width="50"/>
                </div>
                <div className="main">
                    <div>
                        <span style={{color:'#c67763'}} className={`bold ${messenger}`}>{messenger}</span>
                        <span> ({moment(new Date(message_date)).format('LT')}) : {message} </span>
                    </div>
                </div>
            </div>
        )
    }
    sendMessage = () => {
        const that = this;
        if (this.state.message){
            request.put({
                url:`${this.base_url}/internshipbuffer/putChat?internshipbuffer=${this.props.params.id}&message=${this.state.message}`,
                headers:{
                    "Authorization":`Bearer ${localStorage.getItem('auth-token')}`
                }
            },function(err,resp,body){
                that.setState({message:''})
                that.getMessage();
            })
        }
        else{
            this.setState({message_error:'error',error_message:'Required'})       
        }
        that.scrollToBottom(document.getElementsByClassName('messages-container')[0])
    }
    scrollToBottom = (element) => {
        console.log(element.scrollHeight)
        element.scrollTop = element.scrollHeight;
    }
    setMessage = (e) => {
        this.setState({message:e.target.value})
        if (e.target.value === ''){
            this.setState({message_error:'error',error_message:'Required'})
        }
        else{
            this.setState({message_error:'',error_message:''})
        }
    }
}

export default Support

supportAction.jsx

import Reflux from 'reflux'
import supportResource from '../resources/supportResource'

var actions = Reflux.createActions({
    'getMessage': {
        children: ['completed', 'failed']
    }
});
console.log(actions)

actions.getMessage.listenAndPromise(supportResource.getMessage);
export default actions;

我在我的 React 应用程序中使用了 reflux-promise 模块。我已经定义了一个获取资源的操作，该资源从服务器获取数据。我在我的行动中使用了 listenAndPromise 。我已将我的应用程序配置为在 config-reflux.jsx 文件中使用 promise。然后它也显示 listenAndPromise is not a function。

有什么帮助吗？谢谢！！

Answer 1

我认为你导入的顺序是错误的。在使用此功能之前尝试导入配置。

import './util/config-reflux'; // <-- make sure you import it before any component or action using it
import Support from './pages/support';

配置-reflux.jsx:

var Reflux = require('reflux');
var RefluxPromise = require('reflux-promise');

// Uses the user agent's Promise implementation
Reflux.use(RefluxPromise(window.Promise)); // eslint-disable-line new-cap

ReactJs：listenAndPromise 不是函数

ReactJs : listenAndPromise is not a function

promise

reactjs

refluxjs