I use 'react-fileupload' to select a file and send it to the server, if successful, I get a response with the contents of the file, but the state of the repository is not updated.
Component with bootloader:
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); Component where file contents are displayed:
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; } }
uploadSuccess,updateOverviewsimply throwsupdateOverview{ type: FETCH_OVERVIEW, payload: data }, and should transfer this case to dispatcher? - Niki-Timofe