React + Rudux を導入してみた!Reduxは慣れるまでが勝負やね

React + Rudux を導入してみた!Reduxは慣れるまでが勝負やね

React でTODOリストを開発しているのですが、

今回は、Reduxを導入してみました。

Redux を導入することで、stateをRedux で管理することができるようになります。

メリットとしては、どのコンポーネントも、このRedux で管理されたstate を参照するようになるので、統一した値を参照することができるようになり、

コンポーネント同士のバケツリレーをする必要がなくなるのですね。

vue.js だったら、vuex ってのを使用しますし、

reactだったら、redux

JSのフレームワークを触るなら、このあたりの知識は必須かなと思っております。

今回は、Reduxにstateを更新できるところまで実装できたらいいかな

ということで、早速実装していく!

index.js

import React from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import App from "./App";

let nextId = 1;
 //action
const addTodo = text => ({
  type: "ADD_TODO",
  id: nextId++,
  todo: text
});

//reducer
const reducer = (state = [], action) => {
  switch (action.type) {
    case "ADD_TODO":
      return [
        ...state,
        {
          id: action.id,
          todo: action.todo
        }
      ];
    default:
      return state;
  }
};
const store = createStore(reducer);

//stateに変更があったら参照できる
store.subscribe(() => {
  console.log(store.getState());
});

//dispatch
store.dispatch(addTodo("test"));

redux を使用する上で重要なのは、

dispatch, action, reducer の考え方

dispatch はaction を呼ぶ

action はreducer を呼ぶ関数

reducer で、reduxで管理しているstate更新

というようなイメージです。

この役割を理解できれば、

あとは、書き方を覚えるだけかな

初見はめちゃ難しく感じるかもですが、

慣れてくると、けっこうシンプルに理解できるようになる気がします。

実際に実務で使用するまでは、ちゃんと理解することはできなさそうだけど

https://github.com/TsuyoshiTomozawa/react-todo

次回は、Reduxに管理したstate をブラウザに表示するところまで実装してみようと思います!

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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