React/Redux调度功能不起作用

Question

我正在使用'react-fileupload'在我的服务器上上传文件。如果成功，我收到此文件内容的回复。因此，在一个组件中，我想上传文件并更改商店状态，并在另一个组件中显示该数据。

但我不知道为什么我的调度功能不起作用。

组件与载：

import React, { Component } from 'react'; 
import FileUpload from 'react-fileupload'; 
import { connect } from 'react-redux'; 
import { updateOverview } from '../actions/index'; 
import { bindActionCreators } from 'redux'; 

class Header extends Component { 
    render() { 
    const options = { 
     baseUrl: 'http://127.0.0.1:8000/api/upload_file', 
     chooseAndUpload: true, 
     uploadSuccess: function(res) { 
     console.log('success'); 
     updateOverview(res.data); 
     }, 
     uploadError: function(err) { 
     alert(err.message); 
     } 
    }; 
    return (
     <div> 
     <FileUpload options={options} ref="fileUpload"> 
      <button 
      className="yellow darken-2 white-text btn-flat" 
      ref="chooseAndUpload"> 
      Upload 
      </button> 
     </FileUpload> 
     </div> 
    ); 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ updateOverview }, dispatch); 
} 

export default connect(null, mapDispatchToProps)(Header); 

组件，其中示出数据：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

class Overview extends Component { 
    renderContent() { 
    console.log(this.props.overview); 
    if (!this.props.overview) { 
     return <div> Upload file!</div>; 
    } 
    return this.props.overview; 
    } 
    render() { 
    return (
     <div> 
     <h1>Overview</h1> 
     {this.renderContent()} 
     </div> 
    ); 
    } 
} 
function mapStateToProps({ overview }) { 
    return { overview }; 
} 
export default connect(mapStateToProps)(Overview); 

行动创作者：

import { FETCH_OVERVIEW } from './types'; 

export function updateOverview(data) { 
    return { type: FETCH_OVERVIEW, payload: data }; 
} 

减速器index.js

import { combineReducers } from 'redux'; 
import overviewReducer from './overviewReducer'; 

export default combineReducers({ 
    overview: overviewReducer 
}); 

个

overviewReducer.js

import { FETCH_OVERVIEW } from '../actions/types'; 
export default function(state = null, action) { 
    switch (action.type) { 
    case FETCH_OVERVIEW: 
     return action.payload; 
    default: 
     return state; 
    } 
} 

Answer 1

The only use case for bindActionCreators is when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass dispatch or the Redux store to it.

你Header组件已经知道如何创建行动。 考虑到您的Home组件需要，您不需要bindActionCreators。

正确的做法。

const mapDispatchToProps = dispatch => { 
    return { 
     callUpdateOverview:() => { 
      dispatch({ updateOverview }); 
     } 
    } 
} 

而在Header渲染方法：

this.props.updateOverview(res.data); 

编辑：

在你Home组件render方法，

 const homeThis = this; //save `this` object to some variables 
     ^^^^^^^^^^^^^^^^^^^^^^ 

     const options = { 
      baseUrl: .., 
      chooseAndUpload: .., 
      uploadSuccess: function (res) { 
       homeThis.props.callUpdateOverview();// call using `homeThis`   
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
      } 
     }; 

Answer 2

在代码中，您呼叫

updateOverview(res.data); 

实际上应该被称为像，

this.props.updateOverview(res.data); 

因为，终极版将只能听调度绑定的动作，所以为了实现这一点，我们使用函数从react-redux包中，使redux知道在执行动作时进行更新。

connect将你的行动绑定到组件的道具上this.props，所以它是非常有必要使用this.props.action()并不仅仅是action()