Как настроить маршрутизацию?

Question

[dfv123]

Код: https://codesandbox.io/s/wnzxrox9y8
Есть два маршрута. По маршруту "/" страница, где рендерится список всех тудушек и кнопка добавления новой. По клику на кнопку переход на 'страницу '/add' где форма для добавления новой тудушки. После сохранения тудушки редирект на главную страницу. Из-за неправильно организованной структуры при добавлении новой тудушки заново получаю данные с сервера. Как сделать, чтобы при редиректе не подтягивались новые данные с сервера?
И где правильнее при таком подходе хранить Routes? в components?

Answer 1

[Антон Спирин]

Вы можете добавить в store ключ isLoaded и проверять:

const { isLoaded, fetchData } = this.props;

if (!isLoaded) fetchData();

Не понятно зачем action fetchData абстрактный. Переделайте в fetchTodos и пропишите url в нем, а не передавайте в компоненте.

Контейнер CreateTodo можно переписать так:

import React, {Component} from 'react';
import { connect } from "react-redux";
import { addData } from '../actions';
import Form from '../components/Form';

const mapDispatchToProps = {
    addData,
};

export default connect(null, mapDispatchToProps)(Form);

Comments

[dfv123]

Учел все ваши замечания, но почему-то не работает, не могли бы вы взглянуть https://codesandbox.io/s/wnzxrox9y8

[Антон Спирин]

dfv123,

case "ADD": {
      const todo = { // const так как переменная не переопределяется
        comment: payload.comment,
        timestamp: Date.now()
      };
      return {
        ...state,  // предыдущее состояние, вы его теряли
        todos: [...state.todos, todo]
      };
    }