How to set up routing?

Question

React

Code: https://codesandbox.io/s/wnzxrox9y8
There are two routes. On the "/" route, the page where the list of all tushushkas and the button for adding a new one are rendered. By clicking on the button go to the 'page '/add' where the form for adding a new body. After saving the home page, redirect to the main page. Due to an incorrectly organized structure, when adding a new body, I again receive data from the server. How can I prevent new data from the server from being pulled during a redirect?
And where is it more correct to store Routes with this approach? in components?

Answer 1

You can add the isLoaded key to the store and check:

const { isLoaded, fetchData } = this.props;

if (!isLoaded) fetchData();

It is not clear why action fetchData is abstract. Convert it to fetchTodos and write the url in it, rather than passing it in the component. The CreateTodo
container can be rewritten like this:

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);