Пример приложения Redux MERN: создание простого приложения со списком задач

Redux — это популярная библиотека JavaScript, которая помогает управлять состоянием приложения предсказуемым и масштабируемым образом. Он широко используется при создании одностраничных приложений и предоставляет централизованное хранилище, в котором хранится все состояние приложения. В этой статье мы рассмотрим простой пример создания приложения Todo List с использованием стека MERN (MongoDB, Express, React, Node.js) с Redux.

Предпосылки

Чтобы следовать этому руководству, вы должны иметь базовое представление о JavaScript и стеке MERN. На вашем компьютере также должны быть установлены Node.js и npm.

Настройка проекта стека MERN

Для начала нам нужно настроить наш проект стека MERN. Сначала создайте новый каталог с именем mern-todo-app и перейдите в него:

mkdir mern-todo-app
cd mern-todo-app

Затем инициализируйте новый проект Node.js:

npm init -y

Это создаст новый файл package.json с настройками по умолчанию.

Установка зависимостей

Теперь мы установим необходимые зависимости для нашего приложения стека MERN. Нам понадобятся express, mongoose, body-parser, cors, concurrently, nodemon, react, react-dom и redux. В терминале выполните следующую команду:

npm install express mongoose body-parser cors concurrently nodemon react react-dom redux

Это установит все необходимые зависимости для нашего приложения.

Создание сервера с помощью Express

Мы начнем с создания простого сервера Express. Создайте новый файл с именем server.js в корневом каталоге и добавьте следующий код:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();

app.use(bodyParser.json());
app.use(cors());

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

В этом коде мы импортируем необходимые зависимости, создаем новый экземпляр express и настраиваем промежуточное ПО для анализа входящих запросов JSON и обработки CORS. Мы также определяем константу PORT и прослушиваем входящие соединения на этом порту.

Подключение к MongoDB

Далее мы подключимся к базе данных MongoDB, используя mongoose. Добавьте следующий код в конец файла server.js:

const mongoose = require('mongoose');

const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://localhost:27017/mern-todo-app';

mongoose.connect(MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

mongoose.connection.once('open', () => {
  console.log('MongoDB connection established successfully');
});

В этом коде мы импортируем mongoose и определяем константу MONGODB_URI, указывающую расположение нашей базы данных MongoDB. Затем мы подключаемся к базе данных с помощью метода mongoose.connect() и записываем сообщение в консоль, когда соединение установлено.

Создание модели Todo

Теперь, когда мы подключены к базе данных, мы можем создать модель Todo, используя mongoose. Создайте новый файл с именем todo.model.js в каталоге models и добавьте следующий код:

const mongoose = require('mongoose');

const todoSchema = new mongoose.Schema({
  text: { type: String, required: true },
  completed: { type: Boolean, default: false },
});

const Todo = mongoose.model('Todo', todoSchema);

module.exports = Todo;

В этом коде мы определяем todoSchema с помощью mongoose.Schema.