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

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

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

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

こうすることで、

const App = ({ todos, addTodo }) => {

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>

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

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

現場で働けるエンジニア育成プラン

未経験からエンジニアに転職したいと考えている人を対象にレッスンを行っております。


私は29歳未経験からエンジニアに転職しました。

それまではミュージシャンを目指して音楽活動ばかり。
社会人としての経験はゼロでした。

エンジニア転職を決めたきっかけは、
その当時、ミュージシャンという職に対して将来的に希望がもてず、お金もなく、副業でやっていた物販にも失敗し、借金も1000万オーバー。
まさに人生のどん底で、そんなときに次の人生のステージとしてプログラミングという世界を選択しました。

あれから、数年。
今ではフリーランスとして仕事ができており、
収入もあの頃の数倍にまでなり、借金も返済できました。
エンジニア転職で人生が変わったといっても過言ではありません。

ただ、エンジニアに転職してからの時期は、困難の連続でした。
とくに最初の1−2年は、わからないことだらけで、本当にハゲるかと思うくらい苦しく、
実際に1年半後には適応障害になり、体を壊してしまいました。

プログラマーという職はタフな仕事です。

これからエンジニアを目指される方には、少しでも現場で苦労してほしくないという気持ちで、プログラミングのレッスンをしております。

私のレッスンではPHPを基本的なところからしっかりと学習していただいております。

これからPHPを使ってバックエンドエンジニアになりたい方には、大変おすすめのレッスン内容になっております。

レッスンはマンツーマン形式を採用しており、
しっかりとメンティーさんお一人お一人に対して、丁寧にコードレビューをして、
プログラミングの基礎をしっかりと身につけていただきます。
出題する問題には回答は用意しておらず、ご自身がしっかりとロジックを考えることを最大限重視しています。
また現場基準でコードレビューをしっかりおこなっておりますので、悪いクセがつくことを防ぎます。

PHPを基礎からしっかりと学習したい、Webエンジニアとして転職を考えているということでしたら、私のレッスンはおすすめできます。

実際の実績としても、
30代での転職成功者も多数!
未経験から機械学習エンジニアに転職成功!
MENTAでは圧倒的に高評価のレビューをいただいております。

エンジニアに転職して、人生を変えたい
再チャレンジしたい
と思っている方
もしかするとお力になれるかもしれません。

まずはお気軽にご相談ください。