react redux todolist in 2 files, i will inevitably forget syntax, plz refer here

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import { connect } from 'react-redux';
import './App.css';


let nextTodoId = 0
const addTodo = (text) => ({
  type: 'add',
  id: nextTodoId++,
  text
})

// ref hack: https://reactjs.org/docs/refs-and-the-dom.html
let AddTodo = ({ addTodo }) => {
  let input;
  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault();
        if (!input.value.trim()) return;
        addTodo(input.value);
        input.value = '';
      }}>
        <input ref={node => {input = node }} />
        <button type="submit"> add todo </button>
      </form>
    </div>
  );
}
AddTodo = connect(state => ({}), { addTodo: addTodo } )(AddTodo);

let TodoList = ({ todos }) => (
  <ul>
    {todos.map(todo => (<li>{todo}</li>))}
  </ul>
);

TodoList=connect((state) => ({todos: state }), {})(TodoList);

class App extends Component {
  render() {
    return (
      <div>
        <AddTodo />
        <TodoList />
      </div>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import registerServiceWorker from './registerServiceWorker';


function reducer(state = [], action) {
  if (action.type=='add') {
    return [...state, action.text]
  }
  return state;
}

const store = createStore(reducer);


ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
, document.getElementById('root'));
registerServiceWorker();