Not able to re-render the page after updating redux state - node.js

Question

Here i am getting the list of google drive files in '/dashboard/gdrive'. There is one more event of uploading a new file. On uploading the redux state shows that the new file is stored in state but whil re-rendering i am not able to access the store states.
Here is the codeblock
import React, { Component } from 'react';
import PropTypes from "prop-types";
import {connect} from "react-redux";
import {logoutUser} from "./../../actions/authActions.js";
import {syncCloud} from "./../../actions/cloudActions.js";
import {uploadFile} from "./../../actions/cloudActions.js";
class Gdrive extends Component {
constructor(){
super();
this.state={
file: null
}
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.handleCancelEvent = this.handleCancelEvent.bind(this);
}
onChange(e){
this.setState({
file: e.target.files[0]
});
}
onSubmit(e){
e.preventDefault();
const data = new FormData();
data.append('filename', this.state.file);
this.props.uploadFile(data);
}
handleCancelEvent(){
this.setState({
file: null
})
}
render() {
return (
<div>
<table>
<thead>
<tr><th>fileid</th><th>filename</th></tr>
</thead>
<tbody>
{this.props.cloud.files.data.map(file =>(
<tr>
<td>{file.id}</td>
<td>{file.name}</td>
</tr>
))}
</tbody>
</table>
<fieldset>
<form noValidate onSubmit={this.onSubmit}>
<div>
<label>filename</label>
<input type="file" onChange={this.onChange} name= "filename"></input>
</div>
<div>
<button type="submit">Upload</button>
<button onClick={this.handleCancelEvent}>Cancel</button>
</div>
</form>
</fieldset>
</div>
)
}
}
Gdrive.propTypes = {
logoutUser: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth,
cloud: state.cloud
});
export default connect(
mapStateToProps,
{ logoutUser, syncCloud, uploadFile }
)(Gdrive);
and here is uploadFile action
export const uploadFile = (file) => dispatch => {
axios.post('/gdrive/upload', file)
.then(rslt => {
dispatch({
type: UPLOAD_FILE,
payload: {id: rslt.data.fileid, name: rslt.data.filename}
})
})
.catch(err => {
dispatch({
type: GET_ERRORS,
payload: err
})
});
}
Here is the reducer
import {SYNC_CLOUD, UPLOAD_FILE} from './../actions/types';
const initialState = {
files: {}
};
export default function(state=initialState, action){
switch(action.type){
case SYNC_CLOUD:
return{
...state,
files: action.payload
};
case UPLOAD_FILE:
return{
...state,
files: state.files.data.concat(action.payload),
};
default:
return state;
}
}
error screenshot

Answer 1

I think your reducer is wrongly mapped.The key here is to declare inital state as empty files rather empty object. And also concatinating the existing array with the response from api(payload).
Change ur reducer to something like this:
import {SYNC_CLOUD, UPLOAD_FILE} from './../actions/types';
const initialState = {
files: []
};
export default function(state=initialState, action){
switch(action.type){
case SYNC_CLOUD:
return{
...state,
files: action.payload
};
case UPLOAD_FILE:
return{
[...state, action.payload],
};
default:
return state;
}
}
And change the render function to
<tbody>
{this.props.cloud.files.map(file =>(
<tr>
<td>{file.id}</td>
<td>{file.name}</td>
</tr>
))}
</tbody>

Answer 2

mapDispatchToProps parameter to connect needs to be a function. Either do something like this
const mapDispatchToProps= dispatch => bindActionCreators(
{ logoutUser, syncCloud, uploadFile },
dispatch
)
Or, in pass null as your mapDispatchToProps and in your component use the action creator like this this.props.dispatch(uploadFile(data))