1.Reactとは

JavaScript フロントエンドフレームワーク

アプリケーションで各状態に対するシンプルな設計をすることで、React はデータが変更された時に、適切なコンポーネントだけを効率的に更新してレンダリングすることができる

自身の状態を管理するカプセル化されたコンポーネントを構築することで、それらのコンポーネントを呼び出し複雑なUI もコンポーネント呼び出しで作成できる

2.Reduxとは

Fluxアーキテクチャの一種

2.1.構成用要素

2.1.1.Reduce

状態を変化させる関数

引数

store 今の状態を示すオブジェクト
action どんな動作を行ったかを示すオブジェクト

ES2015仕様：Spread Operator

const hoge = [2, 3];
console.log(1, ...hoge, 4.5);

// 実行結果　[1,2,3,4,5]

const fuga = { name: 'Taro', age: 25 };
const piyo = { name: 'Jiro', location: 'Tokyo' };
console.log({ ...fuga, ...piyo });

// プロパティがかぶる場合、後のものが優先する
// 実行結果　{name: 'Jiro',age: 25 ,location: 'Tokyo' }

const myFunc = (x, y, z) => [x, y, z];
const age = [0, 1, 2];
mfFunc(...age);

// 実行結果　[0,1,2]

注意点

値渡が基本　オブジェクトや配列は参照渡しとなるため、Object.assignを用いる

onst target = { a: 1, b: 2}
const source = { b: 3, d: 4}

const returnedTarget = Object.assign(target, source);

console.log(target);
console.log(source);
console.log(returnedTarget);

// $ node test.js
// { a: 1, b: 3, d: 4 }
// { b: 3, d: 4 }
// { a: 1, b: 3, d: 4 }

let user = {
    username: "John",
};

let user_id = {
    id: 1,
};

let email = {
    email: "john@example.com",
};

user = Object.assign(user, user_id, email);

console.log(user);

  //結果
  //{ username: 'John', id: 1, email: 'john@example.com' }

Object.assignを使った例(form)

const form = {
    firstName: null,
    lastName: null,
    Email: null,
    zipCode: null,
    Address: null,
    Phone: null
}

const input = {
    firstName: 'John',
    lastName: 'Doe',
    Email: 'john@example.com'
}

Object.assign(form, input)

console.log(form)

// $ node test.js
//  {
//  firstName: 'John',
//  lastName: 'Doe',
//  Email: 'john@example.com',
//  zipCode: null,
//  Address: null,
//  Phone: null
// }