Не обновляется состояние Redux

261

04 сентября 2017, 08:06

Использую '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);

Action creator:

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