How to create a simple blog with Node & React
In this article you will learn how to create a personal blog using React & Node. You will also learn how to config your own Webpack, Redux, React-Router and start your node server from scratch. This tutorial does **not contain authentication process
This is a a bit advanced tutorial — We won’t use any generators (Create react app or express generate) but instead we will configure our own webpack & start our node server from scratch. But if you follow along you should do just fine. Keep in mind that if you get stuck on any step, refer to the github repo
Backend (Node)
We will start by creating a Backend for our app. Create a new folder called server and create an app.js file inside:
const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');
const session = require('express-session');
const cors = require('cors');
const errorHandler = require('errorhandler');
const mongoose = require('mongoose');
mongoose.promise = global.Promise;
const isProduction = process.env.NODE_ENV === 'production';
const app = express();
app.use(cors());
app.use(require('morgan')('dev'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({ secret: 'LightBlog', cookie: { maxAge: 60000 }, resave: false, saveUninitialized: false }));
if(!isProduction) {
app.use(errorHandler());
}
mongoose.connect('mongodb://localhost/lightblog');
mongoose.set('debug', true);
// Add models
// Add routes
app.use(require('./routes'));
app.use((req, res, next) => {
const err = new Error('Not Found');
err.status = 404;
next(err);
});
if (!isProduction) {
app.use((err, req, res) => {
res.status(err.status || 500);
res.json({
errors: {
message: err.message,
error: err,
},
});
});
}
app.use((err, req, res) => {
res.status(err.status || 500);
res.json({
errors: {
message: err.message,
error: {},
},
});
});
const server = app.listen(8000, () => console.log('Server started on http://localhost:8000'));
Make sure to install all the packages needed by running this command in terminal inside server folder (where you app.js is):
npm i -S path express body-parser express-session cors errorhandler mongoose morgan
Finally add Nodemon to automatically re-run our app.js everytime we update something.
npm install --g nodemon
And then run nodemon app.js in terminal to restart our app.
Model creation
We will start by creating our Article model which will have a timestamp, author, body & title. Add a new folder inside server folder called models and create a file called Articles.js inside of it.
const mongoose = require('mongoose');
const { Schema } = mongoose;
const ArticlesSchema = new Schema({
title: String,
body: String,
author: String,
}, { timestamps: true });
ArticlesSchema.methods.toJSON = function() {
return {
_id: this._id,
title: this.title,
body: this.body,
author: this.author,
createdAt: this.createdAt,
updatedAt: this.updatedAt,
};
};
mongoose.model('Articles', ArticlesSchema);
Now lets register the model we created into our server/app.js file:
...
mongoose.connect('mongodb://localhost/lightblog');
mongoose.set('debug', true);
// Add models
require('./models/Articles');
// Add routes
app.use((req, res, next) => {
const err = new Error('Not Found');
err.status = 404;
next(err);
});
...
Routing
We will start by creating a route to POST an article model.
Add the following folder structure to your server folder (server/routes):
server/
..routes/
....index.js
....api/
Edit routes/index.js:
const express = require('express');
const router = express.Router();
router.use('/api', require('./api'));
module.exports = router;
Edit routes/api/index.js:
const router = require('express').Router();
router.use('/articles', require('./articles'));
module.exports = router;
Edit routes/api/articles.js:
const mongoose = require('mongoose');
const router = require('express').Router();
const Articles = mongoose.model('Articles');
router.post('/', (req, res, next) => {
const { body } = req;
if(!body.title) {
return res.status(422).json({
errors: {
title: 'is required',
},
});
}
if(!body.author) {
return res.status(422).json({
errors: {
author: 'is required',
},
});
}
if(!body.body) {
return res.status(422).json({
errors: {
body: 'is required',
},
});
}
const finalArticle = new Articles(body);
return finalArticle.save()
.then(() => res.json({ article: finalArticle.toJSON() }))
.catch(next);
});
router.get('/', (req, res, next) => {
return Articles.find()
.sort({ createdAt: 'descending' })
.then((articles) => res.json({ articles: articles.map(article => article.toJSON()) }))
.catch(next);
});
router.param('id', (req, res, next, id) => {
return Articles.findById(id, (err, article) => {
if(err) {
return res.sendStatus(404);
} else if(article) {
req.article = article;
return next();
}
}).catch(next);
});
router.get('/:id', (req, res, next) => {
return res.json({
article: req.article.toJSON(),
});
});
router.patch('/:id', (req, res, next) => {
const { body } = req;
if(typeof body.title !== 'undefined') {
req.article.title = body.title;
}
if(typeof body.author !== 'undefined') {
req.article.author = body.author;
}
if(typeof body.body !== 'undefined') {
req.article.body = body.body;
}
return req.article.save()
.then(() => res.json({ article: req.article.toJSON() }))
.catch(next);
});
router.delete('/:id', (req, res, next) => {
return Articles.findByIdAndRemove(req.article._id)
.then(() => res.sendStatus(200))
.catch(next);
});
module.exports = router;
The routes we have created are:
POST localhost:8000/api/articles/ which expects a body like this:
{
"title": "Test title",
"author": "Erdeljac",
"description": "Test desc",
}
PATCH localhost:8000/api/articles/:id which expects a body like this:
{
"title": "Test title",
"author": "Erdeljac",
"description": "Test desc",
}
GET localhost:8000/api/articles which returns a list of all articles.
GET localhost:8000/api/articles/:id which returns a specific article.
Frontend (React)
Initial configuration (Webpack, package.json & dependencies)
Create a new folder alongside our server folder called client. Like this:
Inside our client folder run the following command in terminal:
npm init
And press enter on all questions, like this:
npm install --save-dev node-sass html-webpack-plugin style-loader sass-loader css-loader file-loader html-loader webpack webpack-dev-server webpack-cli babel babel-loader babel-plugin-transform-object-rest-spread babel-preset-env babel-preset-react
Due to compatibility issues run this command too:
npm i -D extract-text-webpack-plugin@next
After that let’s install other dependencies (not dev dependencies):
npm i -S react moment bootstrap babel-polyfill history prop-types react-dom react-redux react-router-dom react-scripts redux axios
Now create a file called webpack.config.js inside our /client folder.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: [
'babel-polyfill',
'./src/index.js',
],
output: {
publicPath: '/',
filename: './main.js',
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: {
loader: 'file-loader',
options: {
name: 'public/img/[name].[ext]',
outputPath: 'dist/img/',
},
},
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{ loader: 'css-loader', options: { minimize: true } }, 'sass-loader'],
}),
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
minimize: true,
},
},
},
{
test: /\.(otf|ttf|eot|woff|woff2)$/,
loader: 'file-loader',
options: {
name: 'public/fonts/[name].[ext]',
outputPath: 'dist/fonts',
},
},
],
},
plugins: [
new ExtractTextPlugin({ filename: 'style.css' }),
new HtmlWebpackPlugin({
template: './resources/index.html',
filename: './index.html',
hash: true,
}),
],
devServer: {
historyApiFallback: true,
publicPath: '/',
contentBase: './dist',
},
};
And then let’s create .babelrc:
{
"presets": ["env", "react"],
"plugins": ["transform-object-rest-spread"]
}
Head over to package.json and edit the scripts object:
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
...
Create a new folder called resources and create an index.html file inside:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<title>LightBlog</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Configuring SASS
Inside resources folder create a scss folder with style.scss file inside:
@import url('https://fonts.googleapis.com/css?family=Nunito|Poppins:500|Open+Sans');
@import "~bootstrap/scss/bootstrap";
body, html {
height: 100%;
background-color: rgba(0,0,0,.018);
color: rgba(0,0,0,.75);
font-family: 'Nunito';
}
That’s all for configuration. We can now start creating react components. This is how your folder structure should look like:
React components
Inside our client folder create a folder called src and create a file index.js inside of it**:**
import React from 'react';
import ReactDOM from 'react-dom';
import '../resources/scss/style.scss';
ReactDOM.render(
<p>Hello World</p>,
document.getElementById('root'),
);
Now head over to terminal and run (in client dir):
npm start
If everything went fine you should get a result like this in your browser:
Setting up the router & App component
Let’s edit our index.js file:
import React from 'react';
import createHistory from 'history/createBrowserHistory';
import ReactDOM from 'react-dom';
import { Route, Switch, Router } from 'react-router-dom';
import { App } from './components';
import '../resources/scss/style.scss';
ReactDOM.render(
<Router history={createHistory()}>
<Switch>
<Route path="/" component={App} />
</Switch>
</Router>,
document.getElementById('root'),
);
Let’s create a components folder, then create index.js file inside of it.
export { default as App } from './App';
Now let’s create App component, start by creating a folder named App with index.jsx file inside of it:
import React from 'react';
const App = (props) => {
return (
<p>Hello App</p>
)
}
export default App;
If done correctly this should pop up in the browser (if you get an error in console about how it cannot find index.jsx try re running npm start in client folder):
Let’s add routes to our App/index.jsx file:
import React from 'react';
import { withRouter, Switch, Route } from 'react-router-dom';
import { Home } from '../../components';
const App = (props) => {
return (
<Switch>
<Route exact path="/" component={Home} />
</Switch>
)
}
export default withRouter(App);
Let’s create Home component (Create a new folder called Home with index.jsx file inside (Just like we did for App component)):
import React from 'react';
class Home extends React.Component {
render() {
return (
<div className="container">
<h1>LightBlog</h1>
</div>
);
}
}
export default Home;
And now add it to our index.js file that exports App.js:
export { default as App } from './App';
export { default as Home } from './Home';
You should now see this in your browser:
Now let’s update our Home component to render a form:
import React from 'react';
import { Form } from '../../components/Article';
class Home extends React.Component {
render() {
return (
<div className="container">
<div className="row pt-5">
<div className="col-12 col-lg-6 offset-lg-3">
<h1 className="text-center">LightBlog</h1>
</div>
<Form />
</div>
</div>
);
}
}
export default Home;
Let’s create the Article/Form component:
Article/Form/index.jsx:
import React from 'react';
class Form extends React.Component {
render() {
return (
<div className="col-12 col-lg-6 offset-lg-3">
<input className="form-control my-3" placeholder="Article Title" />
<textarea className="form-control my-3" placeholder="Article Description">
</textarea>
<input className="form-control my-3" placeholder="Article Author" />
<button className="btn btn-primary float-right">Submit</button>
</div>
)
}
}
export default Form;
Article/index.js:
export { default as Form } from './Form';
Edit components/index.js:
export { default as App } from './App';
export { default as Home } from './Home';
export { default as Article } from './Article';
You should now get something that looks like this:
Now let’s add some control over our values:
Edit Article/Form/index.jsx:
import React from 'react';
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '',
body: '',
author: '',
}
this.handleChangeField = this.handleChangeField.bind(this);
}
handleChangeField(key, event) {
this.setState({
[key]: event.target.value,
});
}
render() {
const { title, body, author } = this.state;
return (
<div className="col-12 col-lg-6 offset-lg-3">
<input
onChange={(ev) => this.handleChangeField('title', ev)}
value={title}
className="form-control my-3"
placeholder="Article Title"
/>
<textarea
onChange={(ev) => this.handleChangeField('body', ev)}
className="form-control my-3"
placeholder="Article Body"
value={body}>
</textarea>
<input
onChange={(ev) => this.handleChangeField('author', ev)}
value={author}
className="form-control my-3"
placeholder="Article Author"
/>
<button className="btn btn-primary float-right">Submit</button>
</div>
)
}
}
export default Form;
Now let’s add function to submit an article:
import React from 'react';
import axios from 'axios';
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '',
body: '',
author: '',
}
this.handleChangeField = this.handleChangeField.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(){
const { title, body, author } = this.state;
return axios.post('http://localhost:8000/api/articles', {
title,
body,
author,
});
}
handleChangeField(key, event) {
this.setState({
[key]: event.target.value,
});
}
render() {
const { title, body, author } = this.state;
return (
<div className="col-12 col-lg-6 offset-lg-3">
<input
onChange={(ev) => this.handleChangeField('title', ev)}
value={title}
className="form-control my-3"
placeholder="Article Title"
/>
<textarea
onChange={(ev) => this.handleChangeField('body', ev)}
className="form-control my-3"
placeholder="Article Body"
value={body}>
</textarea>
<input
onChange={(ev) => this.handleChangeField('author', ev)}
value={author}
className="form-control my-3"
placeholder="Article Author"
/>
<button onClick={this.handleSubmit} className="btn btn-primary float-right">Submit</button>
</div>
)
}
}
export default Form;
Upon entering title, body & author and clicking submit you should now get the following result in your network tab:
Adding Redux
Add store.js file inside our /src folder:
import { createStore, combineReducers } from 'redux';
import { home } from './reducers';
const reducers = combineReducers({
home,
});
const store = createStore(reducers);
export default store;
let’s create our home reducer:
inside src folder create a reducers folder with index.js inside of it:
export { default as home } from './home';
now add home.js inside reducers folder:
export default (state={}, action) => {
switch(action.type) {
case ‘HOME_PAGE_LOADED’:
return state;
default:
return state;
}
};
Now we need to wrap our src/index.js component into a Provider:
import React from 'react';
import createHistory from 'history/createBrowserHistory';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Route, Switch, Router } from 'react-router-dom';
import store from './store';
import { App } from './components';
import '../resources/scss/style.scss';
ReactDOM.render(
<Router history={createHistory()}>
<Provider store={store}>
<Switch>
<Route path="/" component={App} />
</Switch>
</Provider>
</Router>,
document.getElementById('root'),
);
Now let’s edit our Home component to load all existing articles:
Edit src/components/Home/index.jsx:
import React from 'react';
import axios from 'axios';
import { connect } from 'react-redux';
import { Form } from '../../components/Article';
class Home extends React.Component {
componentDidMount() {
const { onLoad } = this.props;
axios('http://localhost:8000/api/articles')
.then((res) => onLoad(res.data));
}
render() {
const { articles } = this.props;
return (
<div className="container">
<div className="row pt-5">
<div className="col-12 col-lg-6 offset-lg-3">
<h1 className="text-center">LightBlog</h1>
</div>
<Form />
</div>
<div className="row pt-5">
<div className="col-12 col-lg-6 offset-lg-3">
{articles.map((article) => {
return (
<div className="card my-3">
<div className="card-header">
{article.title}
</div>
<div className="card-body">
{article.body}
</div>
<div className="card-footer">
<i>{article.author}
<p className="float-right">
{new Date(article.createdAt).toLocaleDateString()}
</p>
</i>
</div>
</div>
)
})}
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => ({
articles: state.home.articles,
});
const mapDispatchToProps = dispatch => ({
onLoad: data => dispatch({ type: 'HOME_PAGE_LOADED', data }),
});
export default connect(mapStateToProps, mapDispatchToProps)(Home);
Edit the home reducer:
export default (state={articles: []}, action) => {
switch(action.type) {
case 'HOME_PAGE_LOADED':
return {
...state,
articles: action.data.articles,
};
default:
return state;
}
};
You should now get something that looks like this (if you have articles in your DB):
Let’s add a reducer action to execute once we submit an article:
Edit src/components/Article/Form/index.jsx:
import axios from 'axios';
import React from 'react';
import { connect } from 'react-redux';
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '',
body: '',
author: '',
}
this.handleChangeField = this.handleChangeField.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(){
const { onSubmit } = this.props;
const { title, body, author } = this.state;
return axios.post('http://localhost:8000/api/articles', {
title,
body,
author,
})
.then((res) => onSubmit(res.data));
}
handleChangeField(key, event) {
this.setState({
[key]: event.target.value,
});
}
render() {
const { title, body, author } = this.state;
return (
<div className="col-12 col-lg-6 offset-lg-3">
<input
onChange={(ev) => this.handleChangeField('title', ev)}
value={title}
className="form-control my-3"
placeholder="Article Title"
/>
<textarea
onChange={(ev) => this.handleChangeField('body', ev)}
className="form-control my-3"
placeholder="Article Body"
value={body}>
</textarea>
<input
onChange={(ev) => this.handleChangeField('author', ev)}
value={author}
className="form-control my-3"
placeholder="Article Author"
/>
<button onClick={this.handleSubmit} className="btn btn-primary float-right">Submit</button>
</div>
)
}
}
const mapDispatchToProps = dispatch => ({
onSubmit: data => dispatch({ type: 'SUBMIT_ARTICLE', data }),
});
export default connect(null, mapDispatchToProps)(Form);
Now let’s edit our home reducer:
export default (state={articles: []}, action) => {
switch(action.type) {
case 'HOME_PAGE_LOADED':
return {
...state,
articles: action.data.articles,
};
case 'SUBMIT_ARTICLE':
return {
...state,
articles: ([action.data.article]).concat(state.articles),
}
default:
return state;
}
};
Try adding an article and see if it updates in real time!
Deleting & Editing articles
Let’s modify our Home/index.jsx component to render Edit & Delete buttons w/ some new styling:
import React from 'react';
import axios from 'axios';
import moment from 'moment';
import { connect } from 'react-redux';
import { Form } from '../../components/Article';
class Home extends React.Component {
componentDidMount() {
const { onLoad } = this.props;
axios('http://localhost:8000/api/articles')
.then((res) => onLoad(res.data));
}
render() {
const { articles } = this.props;
return (
<div className="container">
<div className="row pt-5">
<div className="col-12 col-lg-6 offset-lg-3">
<h1 className="text-center">LightBlog</h1>
</div>
<Form />
</div>
<div className="row pt-5">
<div className="col-12 col-lg-6 offset-lg-3">
{articles.map((article) => {
return (
<div className="card my-3">
<div className="card-header">
{article.title}
</div>
<div className="card-body">
{article.body}
<p className="mt-5 text-muted"><b>{article.author}</b> {moment(new Date(article.createdAt)).fromNow()}</p>
</div>
<div className="card-footer">
<div className="row">
<button className="btn btn-primary mx-3">
Edit
</button>
<button className="btn btn-danger">
Delete
</button>
</div>
</div>
</div>
)
})}
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => ({
articles: state.home.articles,
});
const mapDispatchToProps = dispatch => ({
onLoad: data => dispatch({ type: 'HOME_PAGE_LOADED', data }),
});
export default connect(mapStateToProps, mapDispatchToProps)(Home);
Your article should now look something like this:
Modify Home/index.jsx again to add delete functionality:
import React from 'react';
import axios from 'axios';
import moment from 'moment';
import { connect } from 'react-redux';
import { Form } from '../../components/Article';
class Home extends React.Component {
constructor(props) {
super(props);
this.handleDelete = this.handleDelete.bind(this);
}
componentDidMount() {
const { onLoad } = this.props;
axios('http://localhost:8000/api/articles')
.then((res) => onLoad(res.data));
}
handleDelete(id) {
const { onDelete } = this.props;
return axios.delete(`http://localhost:8000/api/articles/${id}`)
.then(() => onDelete(id));
}
render() {
const { articles } = this.props;
return (
<div className="container">
<div className="row pt-5">
<div className="col-12 col-lg-6 offset-lg-3">
<h1 className="text-center">LightBlog</h1>
</div>
<Form />
</div>
<div className="row pt-5">
<div className="col-12 col-lg-6 offset-lg-3">
{articles.map((article) => {
return (
<div className="card my-3">
<div className="card-header">
{article.title}
</div>
<div className="card-body">
{article.body}
<p className="mt-5 text-muted"><b>{article.author}</b> {moment(new Date(article.createdAt)).fromNow()}</p>
</div>
<div className="card-footer">
<div className="row">
<button className="btn btn-primary mx-3">
Edit
</button>
<button onClick={() => this.handleDelete(article._id)} className="btn btn-danger">
Delete
</button>
</div>
</div>
</div>
)
})}
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => ({
articles: state.home.articles,
});
const mapDispatchToProps = dispatch => ({
onLoad: data => dispatch({ type: 'HOME_PAGE_LOADED', data }),
onDelete: id => dispatch({ type: 'DELETE_ARTICLE', id }),
});
export default connect(mapStateToProps, mapDispatchToProps)(Home);
You should now be able to delete an article on click!
Let’s add function to edit our article by modifying Home/index.jsx one more time!
import React from 'react';
import axios from 'axios';
import moment from 'moment';
import { connect } from 'react-redux';
import { Form } from '../../components/Article';
class Home extends React.Component {
constructor(props) {
super(props);
this.handleDelete = this.handleDelete.bind(this);
this.handleEdit = this.handleEdit.bind(this);
}
componentDidMount() {
const { onLoad } = this.props;
axios('http://localhost:8000/api/articles')
.then((res) => onLoad(res.data));
}
handleDelete(id) {
const { onDelete } = this.props;
return axios.delete(`http://localhost:8000/api/articles/${id}`)
.then(() => onDelete(id));
}
handleEdit(article) {
const { setEdit } = this.props;
setEdit(article);
}
render() {
const { articles } = this.props;
return (
<div className="container">
<div className="row pt-5">
<div className="col-12 col-lg-6 offset-lg-3">
<h1 className="text-center">LightBlog</h1>
</div>
<Form />
</div>
<div className="row pt-5">
<div className="col-12 col-lg-6 offset-lg-3">
{articles.map((article) => {
return (
<div className="card my-3">
<div className="card-header">
{article.title}
</div>
<div className="card-body">
{article.body}
<p className="mt-5 text-muted"><b>{article.author}</b> {moment(new Date(article.createdAt)).fromNow()}</p>
</div>
<div className="card-footer">
<div className="row">
<button onClick={() => this.handleEdit(article)} className="btn btn-primary mx-3">
Edit
</button>
<button onClick={() => this.handleDelete(article._id)} className="btn btn-danger">
Delete
</button>
</div>
</div>
</div>
)
})}
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => ({
articles: state.home.articles,
});
const mapDispatchToProps = dispatch => ({
onLoad: data => dispatch({ type: 'HOME_PAGE_LOADED', data }),
onDelete: id => dispatch({ type: 'DELETE_ARTICLE', id }),
setEdit: article => dispatch({ type: 'SET_EDIT', article }),
});
export default connect(mapStateToProps, mapDispatchToProps)(Home);
Now let’s modify our home reducer:
export default (state={articles: []}, action) => {
switch(action.type) {
case 'HOME_PAGE_LOADED':
return {
...state,
articles: action.data.articles,
};
case 'SUBMIT_ARTICLE':
return {
...state,
articles: ([action.data.article]).concat(state.articles),
};
case 'DELETE_ARTICLE':
return {
...state,
articles: state.articles.filter((article) => article._id !== action.id),
};
case 'SET_EDIT':
return {
...state,
articleToEdit: action.article,
};
case 'EDIT_ARTICLE':
return {
...state,
articles: state.articles.map((article) => {
if(article._id === action.data.article._id) {
return {
...action.data.article,
}
}
return article;
}),
articleToEdit: undefined,
}
default:
return state;
}
};
And lastly edit components/Article/Form/index.jsx:
import axios from 'axios';
import React from 'react';
import { connect } from 'react-redux';
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '',
body: '',
author: '',
}
this.handleChangeField = this.handleChangeField.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentWillReceiveProps(nextProps) {
if(nextProps.articleToEdit) {
this.setState({
title: nextProps.articleToEdit.title,
body: nextProps.articleToEdit.body,
author: nextProps.articleToEdit.author,
});
}
}
handleSubmit(){
const { onSubmit, articleToEdit, onEdit } = this.props;
const { title, body, author } = this.state;
if(!articleToEdit) {
return axios.post('http://localhost:8000/api/articles', {
title,
body,
author,
})
.then((res) => onSubmit(res.data))
.then(() => this.setState({ title: '', body: '', author: '' }));
} else {
return axios.patch(`http://localhost:8000/api/articles/${articleToEdit._id}`, {
title,
body,
author,
})
.then((res) => onEdit(res.data))
.then(() => this.setState({ title: '', body: '', author: '' }));
}
}
handleChangeField(key, event) {
this.setState({
[key]: event.target.value,
});
}
render() {
const { articleToEdit } = this.props;
const { title, body, author } = this.state;
return (
<div className="col-12 col-lg-6 offset-lg-3">
<input
onChange={(ev) => this.handleChangeField('title', ev)}
value={title}
className="form-control my-3"
placeholder="Article Title"
/>
<textarea
onChange={(ev) => this.handleChangeField('body', ev)}
className="form-control my-3"
placeholder="Article Body"
value={body}>
</textarea>
<input
onChange={(ev) => this.handleChangeField('author', ev)}
value={author}
className="form-control my-3"
placeholder="Article Author"
/>
<button onClick={this.handleSubmit} className="btn btn-primary float-right">{articleToEdit ? 'Update' : 'Submit'}</button>
</div>
)
}
}
const mapDispatchToProps = dispatch => ({
onSubmit: data => dispatch({ type: 'SUBMIT_ARTICLE', data }),
onEdit: data => dispatch({ type: 'EDIT_ARTICLE', data }),
});
const mapStateToProps = state => ({
articleToEdit: state.home.articleToEdit,
});
export default connect(mapStateToProps, mapDispatchToProps)(Form);
That’s it!
Thank you for going through this tutorial! If you are stuck on any step, refer to this github repo and find your problem:
If you want to, check out my android appSwipeFeed
Contact: [email protected]
Please report any questions or errors in the article, thanks!
Recommended Courses:
☞ Learn Nodejs by building 12 projects
☞ Supreme NodeJS Course - For Beginners
☞ Node.js for beginners, 10 developed projects, 100% practical
☞ Node.js - From Zero to Web App
Suggest:
☞ Page Transitions In React - React Router V6 and Framer Motion Tutorial
☞ JavaScript for React Developers | Mosh
☞ Learn React - Full Course for Beginners - React Tutorial 2019
☞ React + TypeScript : Why and How