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 };
}

reducer 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

bindActionCreators的唯一用例是当您想要将某些动作创建者传递给不了解Redux的组件时，并且您不想将调度或Redux存储传递给它。

您的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);

因为，redux只会监听分派绑定的动作，所以要启用它，我们使用connect包中的react-redux函数，这样redux就会知道在动作执行时自行更新。

connect会将您的操作绑定到this.props上的组件道具，因此使用this.props.action()而非action()

非常重要

React / Redux调度功能不起作用

2 个答案: