Reactでredux を使用できるようにする！！TODOリスト開発中

引き続き、React でTODOリストを開発しています。

今回は、redux をReact で使用できるように改修していきます

redux　難しい〜〜〜〜！

まだまだ処理の流れが頭の中で整理されていない感じがします。

ただ、redux でstateを管理できるようになると、すべてのコンポーネントで、同じ値を参照するようになるので、アプリ開発においては、必須の知識でしょう。

ポイントだけ、コード書いておきます。

index.js

import { Provider } from "react-redux";
//省略

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

まずはreact-reduxをインストールして、

親コンポーネントをreact-redux のProvider で囲ってあげること

Providerにはstoreも渡しておく

app.js

import { connect } from "react-redux";

//省略

const mapStateToProps = state => {
  return { todos: state };
};

const mapDispatchToProps = dispatch => {
  return {
    addTodo: text => {
      dispatch(addTodo(text));
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

各コンポーネントには、react-redux のconnect を使用

state を参照するための関数と、

stateを更新するための関数（dispatch実行用関数）を用意して、

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);
Code language: JavaScript (javascript)

connect関数の引数に渡して、Appをコネクトする

この書き方は、覚えてしまった方がいいかな

こうすることで、

const App = ({ todos, addTodo }) => {
Code language: JavaScript (javascript)

App で、関数の引数として取得できるようになるというわけ

今回、formタグにonSubmit を追加しましたが、

これも新たな知識として、おさえておく

<form
    onSubmit={e => {
        e.preventDefault();
        if (!input.value.trim()) {
        return;
        }
        addTodo(input.value);
        input.value = "";
    }}
    >
    <input type="text" className="input" ref={node => (input = node)} />
    <button type="submit" className="btn-default">
        追加
    </button>
</form>

それにしても、毎日コツコツ学習すると１週間でもかなりスキルアップできますね。

毎日コツコツやること、大事