didMountした値をフォームのテキストボックスに表示（value）されるようにしたい

Question

###実現したいこと
App.jsにてdidMountした値をContentに渡し、Content.jsにて受け取り、テキストボックスに表示されるようにしたい

###実装の結果・問題点
Content.jsにどうのように受け取り、表示させたら良いかわからず。
とりあえずコードを書いてみたのですが、想定していた値が表示されず。

Reduxの概念とうまく結びつけられていないのでしょうか？

実現するためのヒントをいただけたら幸いです。よろしくお願いします。

▼実装結果（idとnameのところにdidMountした値が表示されるようにしたいがされなかった）

▼ App.js

import React, { Component } from 'react';

import Aside from './components/Aside';
import Header from './components/Header';
import Footer from './components/Footer';
import Top from './components/Top';
import Content from './components/Content';
import List from './components/List';


class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: [],
            name: [], 
        };
    }
    componentDidMount() { // 追加
        const id = 4
        const name = "shiro"
        this.props.didMnt(id,name);
    }
    addReg(id,name) {
        this.setState({
            id: [this.state.id,id],
            name: [this.state.name,name]
        });
    }
    formId
    onChangeId = (e) => {
        console.log(e.target.value)
        this.props.updateFormId(e.target.value);
    }
    // forName
    onChangeName = (e) => {
        console.log(e.target.value)
        this.props.updateFormName(e.target.value);
    }
    // clickSaveButton
    onSaveItem = () => {
        console.log(this.props)
        console.log("SAVE_ID: ",this.props.id);
        console.log("SAVE_NAME: ",this.props.name);
    }

    render() {
        // const formItem = this.props
        const id = this.props.id;
        const name = this.props.name;

        //NAME３文字以上ででsaveボタン押せるようにdisabledを入れる
        const checkName = this.props.name.length >=3;

        return (
            <>
                <Aside />
                <Header />
                    sample site
                <Top />
                <div id="register">
                    <List/>
                    <Content
                        onChangeId={this.onChangeId}
                        onChangeName={this.onChangeName}
                        onSaveItem={this.onSaveItem}
                        checkName={checkName}
                        onAddReg={(id,name)=>this.addReg(id,name)}
                    />
                </div>
                <Footer />
            </>
        );
    }
}
export default App;

▼Content.js

'use strict';
import React,{ useState } from 'react';
import { createStore } from "redux";
import { id, name } from '../reducers';

export default function Content(props) {
    console.log(props)
    return (
        <>
            <p>content</p>
            <Form
                // id={props.id}
                // name={props.name}
                onChangeId={props.onChangeId}
                onChangeName={props.onChangeName}
                onAddReg={(id,name)=>this.addReg(id,name)}
            />
            <button type="button"
                className="btn btn-outline-success"
                onClick={(e) => {props.onSaveItem();console.log(e)}}
                disabled = {!props.checkName}
                >
                SAVE
            </button>
        </>
    );
}

function Form(props) {
    return (
        <form>
            <div className="form-group">
                <label className="pt-2">ID</label>
                <input id="id"
                    type="text"
                    className="form-control"
                    value={props.id}
                    onChange={props.onChangeId}
                />
                <label className="pt-2">Name</label>
                <input id="name"
                    type="text"
                    className="form-control"
                    value={props.name}
                    onChange={props.onChangeName}
                />
            </div>
        </form>
    )
}

▼ conteners/App.js

import { connect } from 'react-redux';
import * as actions from '../actions';
import App from '../App';

const mapStateToProps = state => {
    const  {id,name} = state;
    return {id,name}
}

const mapDispatchToProps = dispatch => {
    return {
        updateFormId: (id) => dispatch(actions.updateFormId(id)),
        updateFormName: (name) => dispatch(actions.updateFormName(name)),
        didMnt: (id, name) => dispatch(actions.didMnt(id, name)),
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

▼actions.js

export const didMnt = (id, name) => {
    return {
        type: 'DID_MOUNT',
        payload: { id, name }
    };
}

export const updateFormId = (id) => {
    return {
        type: 'UPDATE_ID',
        payload: { id }
    };
}
export const updateFormName = (name) => {
    return {
        type: 'UPDATE_NAME',
        payload: { name }
    };
}

▼reducer.js

'use strict';

const initialStateId = ""
export function id(state = initialStateId, action) {
    console.log(action);
    let newState = JSON.parse(JSON.stringify(state));
    switch (action.type) {
        case 'UPDATE_ID':
            newState = action.payload.id;
            break;
        default:
            return state;
    }
    console.log(newState)
    return newState;
};

const initialStateName = ""
export function name(state = initialStateName, action) {
    console.log(action);
    let newState = JSON.parse(JSON.stringify(state));
    switch (action.type) {
        case 'UPDATE_NAME':
            newState = action.payload.name;
            break;
        default:
            return state;
    }
    return newState;
};

▼createStore.js

import { createStore as reduxCreateStore, combineReducers } from "redux";
import { id, name } from "./reducers";

export default function createStore() {
    const store = reduxCreateStore(
        combineReducers({
            id,
            name
        })
    );
    return store;
}