javascript – React / Redux调度功能不起作用

2023年1月16日 214次阅读

我正在使用’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;
  }
}

最佳答案

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组件渲染方法中,

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

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