Edit action in react-redux - reactjs

Question

I am trying to perform an edit action in react-redux. First, I created a button on the index page.
<Link to = {`/standups/${list.id}`}>Edit</Link>
When I clicked on this button, it went to the edit page but no data was present.
In my edit page, I have this code:
class StandupEdit extends Component {
constructor(props){
super(props);
this.state = {
standups: {
user_id: this.props.standup ? this.props.standup.user_id : '',
day: this.props.standup ? this.props.standup.day : '',
work_done: this.props.standup ? this.props.standup.work_done : '',
work_planned: this.props.standup ? this.props.standup.work_planned : '',
blocker: this.props.standup ? this.props.standup.blocker : ''
},
submitted: false
};
}
handleSubmit = (event) => {
event.preventDefault();
const { standups } = this.state;
const { dispatch } = this.props;
if(standups.work_done && standups.work_planned && standups.blocker) {
dispatch(addStandup(this.state.standups))
} else {
this.setState({
submitted: true
})
}
}
componentWillReceiveProps = (nextProps) => {
debugger
this.setState({
standups: {
user_id: nextProps.user_id,
day: nextProps.day,
work_done: nextProps.work_done,
work_planned: nextProps.work_planned,
blocker: nextProps.blocker
}
});
}
componentDidMount(){
if(this.props.match.params.id){
this.props.editStandup(this.props.match.params.id)
}
}
handleChange = (event) => {
const {name, value} = event.target;
const {standups} = this.state;
this.setState({
standups: {
...standups,
[name]: value
}
});
}
render() {
const {standups, submitted, fireRedirect} = this.state
return (
<MuiThemeProvider theme={theme}>
<Paper>
<h1 className='header'>Add new standup</h1>
</Paper>
<Grid container spacing={16}>
<form onSubmit={this.handleSubmit}>
<Paper className='form'>
<TextField fullWidth name= "work_done"
value = {standups.work_done}
onChange= {this.handleChange}
type= "text"
placeholder= "What did you work on yesterday?"/>
{
submitted && !standups.work_done ?
<p>Work done is required</p> : ''
}
</Paper>
<Paper className='form'>
<TextField fullWidth name= "work_planned"
value = {standups.work_planned}
onChange= {this.handleChange}
type= "text"
placeholder= "What are you planning to work on today?"/>
{
submitted && !standups.work_planned ?
<p>Work planned is required</p> : ''
}
</Paper>
<Paper className='form'>
<TextField fullWidth name= "blocker"
value = {standups.blocker}
onChange= {this.handleChange}
type= "text"
placeholder= "Any impediments in your way?"/>
{
submitted && !standups.blocker ?
<p>Blocker required</p> : ''
}
</Paper>
<div className='button'>
<Button type="submit">Update</Button>
</div>
</form>
</Grid>
</MuiThemeProvider>
);
}
}
function mapStateToProps(state, props){
if (props.match.params.id) {
return {
standup: state.standup.standups.findIndex(item => item.id === props.match.params.id)
}
}
return {
standup: null
}
}
export default connect(mapStateToProps, {editStandup})(StandupEdit);
In action, I have this code:
export function editStandup(id) {
return dispatch => {
axios(`${ROOT_URL}/standups/${id}/${API_KEY}`, {
headers: authHeader(),
method: 'GET',
}).then( response => {
dispatch(success(response.data.standup))
})
}
function success(response) {
return {
type: 'STANDUP_EDIT',
payload: response
}
}
}
export function updateStandup(standup) {
const request = axios({
headers: authHeader(),
method: 'PUT',
url: `${ROOT_URL}/standups${API_KEY}`,
data: standup
})
return {
type: 'STANDUP_UPDATE',
payload: request
}
}
And I have following code in my reducer:
export function standup(state = {}, action){
switch (action.type) {
case 'STANDUP_UPDATE':
return state.map(item => {
if(item.id === action.payload.id)
return
standup: action.payload
return item;
});
case 'STANDUP_EDIT':
const index = state.standups.findIndex(item => item.id === action.payload.id);
if (index > -1){
return state.standups.map(item => {
if(item.id === action.payload.id)
return action.payload
});
}else{
return
standup: action.payload
}
default:
return state;
}
}
In my reducer findIndex(item => item.id === action.payload.id);, item => item.id contain error item.id is undefined.
Will anyone help me in solving this problem?

Answer 1

You aren't updating the state in reducer correctly, standups is not defined initially which you must do. Check the same code below
export function standup(state = {standups: []}, action){
switch (action.type) {
case 'STANDUP_UPDATE': {
const index = state.standups.findIndex(item => item.id === action.payload.id);
return {
...state,
standups: {
...state.standups.slice(0, index),
action.payload,
...state.standups.slice(index + 1),
}
}
}
case 'STANDUP_EDIT':
const index = state.standups.findIndex(item => item.id === action.payload.id);
if (index > -1){
return {
...state,
standups: {
...state.standups.slice(0, index),
action.payload,
...state.standups.slice(index + 1),
}
}
}
return {
...state,
standups: {
...state.standups
action.payload,
}
default:
return state;
}
}
Also your component name is StandupEdit and you are connecting StandupNew with the connect function
export default connect(mapStateToProps, {editStandup})(StandupEdit);