What is a right way to work with reducer in Redux? - node.js

Question

I am building an app, sort of dictionary app. In my app a user can add, update and delete a word. Something happened and now my update function does not work. I don't understand why. When I click an update button an error appears in the console. Your hints and suggestions are appreciated.
Word update API
// #route Put api/words/:id
// #desc Update a word by id
// #access Private
router.put(
'/:id',
passport.authenticate('jwt', { session: false }),
(req, res) => {
const { errors, isValid } = validateWordInput(req.body);
// Check validation
if (!isValid) {
// Return any errors
return res.status(400).json(errors);
}
Profile.findOne({ user: req.user.id }).then(profile => {
Word.findById(req.params.id).then(word => {
// Check for word owner
if (word.user.toString() !== req.user.id) {
return res.status(401).json({ notauthorized: 'User not authorized' });
}
const wordID = req.params.id;
const wordInput = req.body;
// Update
Word.findByIdAndUpdate(
{ _id: wordID },
{ $set: wordInput },
{ returnOriginal: false },
(err, word) => {
if (err) {
console.log(err);
}
}
)
.then(word => {
res.json(word);
})
.catch(err =>
res
.status(404)
.json({ wordcannotbeupdated: 'word cannot be updated' })
);
});
});
}
);
Word actions
export const updateWord = (id, updatedWord, history) => dispatch => {
axios
.put(`/api/words/${id}`, updatedWord)
.then(res => {
dispatch({
type: UPDATE_WORD,
payload: res.data
});
history.push('/my-words');
})
.catch(err =>
dispatch({
type: UPDATE_WORD,
payload: ''
})
);
};
Word reducer
import {
GET_WORDS_BY_USER,
ADD_WORD,
UPDATE_WORD,
GET_WORD_BY_ID,
DELETE_WORD,
SEARCH_WORD
} from '../actions/types';
const initialState = {
words: [],
word: {},
loading: false
};
export default function(state = initialState, action) {
switch (action.type) {
case ADD_WORD:
return {
...state,
words: [action.payload, ...state.words]
};
case GET_WORDS_BY_USER:
return {
...state,
words: action.payload
};
case GET_WORD_BY_ID:
return {
...state,
word: action.payload
};
case UPDATE_WORD:
return {
...state,
words: action.payload
};
case SEARCH_WORD:
return {
...state,
words: action.payload
};
case DELETE_WORD:
return {
...state,
words: state.words.filter(word => word._id !== action.payload)
};
default:
return state;
}
}
Edit Word React component
import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import TextFieldGroup from '../common/TextFieldGroup';
import SelectListGroup from '../common/SelectListGroup';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getWordByID, updateWord } from '../../actions/wordActions';
import isEmpty from '../../validation/is-empty';
import {
lexisOptions,
grammarOptions,
partOfSpeechOptions,
styleOptions,
originOptions,
sphereOptions
} from './options';
class EditWord extends Component {
constructor(props) {
super(props);
this.state = {
ugrWordCyr: '',
rusTranslation: '',
example: '',
exampleTranslation: '',
origin: '',
sphere: '',
see: '',
lexis: '',
grammar: '',
partOfSpeech: '',
style: '',
errors: {}
};
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.onCheck = this.onCheck.bind(this);
}
componentWillReceiveProps(nextProps) {
if (nextProps.errors) {
this.setState({ errors: nextProps.errors });
}
if (nextProps.words.word[0]) {
nextProps.words.word.map(word => {
word.ugrWordCyr = !isEmpty(word.ugrWordCyr) ? word.ugrWordCyr : '';
word.rusTranslation = !isEmpty(word.rusTranslation)
? word.rusTranslation
: '';
word.rusTranslation = !isEmpty(word.rusTranslation)
? word.rusTranslation
: '';
word.example = !isEmpty(word.example) ? word.example : '';
word.exampleTranslation = !isEmpty(word.exampleTranslation)
? word.exampleTranslation
: '';
word.origin = !isEmpty(word.origin) ? word.origin : '';
word.sphere = !isEmpty(word.sphere) ? word.sphere : '';
word.see = !isEmpty(word.see) ? word.see : {};
word.lexis = !isEmpty(word.lexis) ? word.lexis : {};
word.grammar = !isEmpty(word.grammar) ? word.grammar : {};
word.see = !isEmpty(word.see) ? word.see : {};
word.style = !isEmpty(word.style) ? word.style : {};
this.setState({
ugrWordCyr: word.ugrWordCyr,
rusTranslation: word.rusTranslation,
example: word.example,
exampleTranslation: word.exampleTranslation,
origin: word.origin,
sphere: word.sphere,
style: word.style,
lexis: word.lexis,
grammar: word.grammar,
see: word.see,
partOfSpeech: word.partOfSpeech
});
});
}
}
componentDidMount() {
this.props.getWordByID(this.props.match.params.id);
}
onSubmit(e) {
e.preventDefault();
const wordData = {
ugrWordCyr: this.state.ugrWordCyr,
rusTranslation: this.state.rusTranslation,
example: this.state.example,
exampleTranslation: this.state.exampleTranslation,
origin: this.state.origin,
sphere: this.state.sphere,
see: this.state.see,
lexis: this.state.lexis,
grammar: this.state.grammar,
partOfSpeech: this.state.partOfSpeech,
style: this.state.style
};
let id = this.props.match.params.id;
// Change a function to update
this.props.updateWord(id, wordData, this.props.history);
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
onCheck(e) {
this.setState({
current: !this.state.current
});
}
render() {
const { errors } = this.state;
return (
<div className="add-word">
<div className="container">
<div className="row">
<div className="col-md-8 m-auto">
<Link to="/my-words" className="btn btn-light">
Go Back
</Link>
<h1 className="display-4 text-center">Edit Word</h1>
<form onSubmit={this.onSubmit}>
<TextFieldGroup
placeholder="Бала"
info="Введите слово на уйгурском"
name="ugrWordCyr"
value={this.state.ugrWordCyr}
onChange={this.onChange}
error={errors.ugrWordCyr}
/>
<TextFieldGroup
placeholder="Ребенок"
info="Введите слово на русском"
name="rusTranslation"
value={this.state.rusTranslation}
onChange={this.onChange}
error={errors.rusTranslation}
/>
<div className="form-check mb-form">
<input
type="checkbox"
className="form-check-input"
name="see"
value={this.state.see}
onChange={this.onCheck}
id="see"
/>
<label htmlFor="see">Смотри</label>
</div>
<TextFieldGroup
placeholder=""
info="Введите пример предложения на уйгурском"
name="example"
value={this.state.example}
onChange={this.onChange}
error={errors.example}
/>
<TextFieldGroup
placeholder=""
info="Введите перевод примерного предложения на русском"
name="exampleTranslation"
value={this.state.exampleTranslation}
onChange={this.onChange}
error={errors.exampleTranslation}
/>
<h6>Происхождение слова</h6>
<SelectListGroup
placeholder="Арабское"
name="origin"
value={this.state.origin}
onChange={this.onChange}
error={errors.origin}
options={originOptions}
/>
<h6>Сфера употребления слова</h6>
<SelectListGroup
placeholder="Физика"
name="sphere"
value={this.state.sphere}
onChange={this.onChange}
error={errors.sphere}
options={sphereOptions}
/>
<h6>Лексика слова</h6>
<SelectListGroup
placeholder="лексика"
name="lexis"
value={this.state.lexis}
onChange={this.onChange}
error={errors.lexis}
options={lexisOptions}
/>
<h6>Стиль слова</h6>
<SelectListGroup
placeholder="стиль"
name="style"
value={this.state.style}
onChange={this.onChange}
error={errors.style}
options={styleOptions}
/>
<h6>Часть речи</h6>
<SelectListGroup
placeholder=""
name="partOfSpeech"
value={this.state.partOfSpeech}
onChange={this.onChange}
error={errors.partOfSpeech}
options={partOfSpeechOptions}
/>
<h6>Грамматика слова</h6>
<SelectListGroup
placeholder="грамматика"
name="grammar"
value={this.state.grammar}
onChange={this.onChange}
error={errors.grammar}
options={grammarOptions}
/>
<input
type="submit"
value="submit"
className="btn btn-info btn-block mt-4"
/>
</form>
</div>
</div>
</div>
</div>
);
}
}
EditWord.propTypes = {
getWordByID: PropTypes.func.isRequired,
errors: PropTypes.object.isRequired,
updateWord: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
errors: state.errors,
words: state.words
});
export default connect(
mapStateToProps,
{ getWordByID, updateWord }
)(withRouter(EditWord));

Answer 1

axios
.put(/api/words/${id}, updatedWord)
if you are using relative api endpoint then it will be going to request to
<react-server-host:port(which is 3000 in your case)>/api/words/${id}
and i am assuming you are running your backend service on another port than 3000 . Thats why it is giving error 404 not found
So when you are requesting api, write absolute endpoint
<backend-server-host:port>/api/words/${id}