React+ReduxでTodoアプリを作る。（Todo追加まで）

今回はReact+ReduxでTodoアプリを作っていきます。
Reduxを使ったinput.valueの取得の仕方がなかなか分からなくて結構時間がかかりました。

ファイル構成
src以下にいつものファイル構成です
・Actions.js
・Reducers.js
・App.js
・index.js

まずActions.jsから

//Actions.js
const ADD_TODO="ADDTODO";

const addtodo =(text)=>{
    return{type:ADD_TODO,text};
};

export {addtodo};
export {ADD_TODO};

今回はTodo追加までなのでActionは1つのみです

次にReducers.jsです

//Reducres.js
import { combineReducers } from "redux";
import {ADD_TODO} from './Actions';

const initialState = [];

const Todo = (state=initialState, action) => {
    switch (action.type) {
      case ADD_TODO:
        return[...state,{todos:action.text}]

      default:
          return state;
    }
  };

const  reducers=combineReducers({Todo});
export default reducers;

stateの初期値は配列になっていますが、todoを削除する機能をつけるなどするとオブジェクトの方が良いかもしれません。

次にApp.jsです

//App.js
import React from 'react';
import { connect } from 'react-redux'
import {addtodo} from './Actions';

class App extends React.Component{
    constructor(props){
        super(props);
       this.inputtext=React.createRef();
       this.submit=this.submit.bind(this);
    }

    submit(e){
        e.preventDefault();
        this.props.ADDTODO(this.inputtext.current.value);
        this.inputtext.current.value="";

    }

    render(){
        const todolist=this.props.todo.map((todos,index)=>{
        return(<li key={index}>{todos.todos}</li>)})
      return(
          <div>
              <form onSubmit={this.submit}>
                  <label>
                      <p>>新しいTodoを追加</p>
                      <input tyoe='text' ref={this.inputtext}/>
                  </label>
                  <button type='submit'>追加</button>
              </form>
              <ul>
                  {todolist}
              </ul>
          </div>
      );
    }
  }

const mapStateToProps = (state) =>{
  return {todo:state.Todo}
}

const mapDispatchToProps = (dispatch) =>(
    {
        ADDTODO:(text)=>dispatch(addtodo(text)),
    }
)
  
export default connect(mapStateToProps,mapDispatchToProps)(App);

ここで1番悩んだのはどうやってinput.valueを得るかということでしたが、ref属性を付けることで解決しました。

最後にindex.jsです

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'; 
import { Provider } from 'react-redux';
import App from './App';
import reducers from './Reducers';
import * as serviceWorker from './serviceWorker';
 
const  store = createStore(reducers);
 
ReactDOM.
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
serviceWorker.unregister();

こんな感じです。

個人的に作ってみた感想は中々キレイにまとまったと思っています。