React + Reduxを基本からまとめてみた【4】【Actions】

Fluxフロー図

![flux_flow.png]
(https://camo.qiitausercontent.com/cdd0824a85a48f51dacc8ec20fa5cf5ce6ec8093/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3434303539332f33313139643830622d383163642d633664382d636233312d6132383837386261313738312e706e67)

Actionsとは

• 要求を受けて変更を依頼
  ⇨ Actionsを書いてstateの変更を依頼する

Actionsの役割

• アプリからStoreへデータを送るためのpayload(データの塊)を渡す役割
  ⇨ アプリから受け取ったデータをReducersへ渡す

なぜActionsを使うのか

• 純粋にデータを渡す処理だけを記述するため
• どのstateをどのように変更するのかについてはReducersに任せる

Actionsの書き方

1. Action typeを定義してexport
2. typeとpayloadを記述する
3. プレーンなobjectを返す

※Actionsは、プレーンなobjectを返す!!

Sample.js

Copied!

//1. Action typeを定義してexport
export const SIGN_IN = "SIGN_IN";

export const signInAction = (userState) => {
//3. プレーンなobjectを返す
  return {
//2. typeとpayloadを記述する
     type: "SIGN_IN",
     payload: {
       isSignedIn: true,
       uid: userState.uid,
       username: userState.username
    }
  }
};

参考サイト

[日本一わかりやすいReact-Redux入門#4...Actionsを書いてstateの変更を依頼しよう]
(https://www.youtube.com/watch?v=0JKkLZHmWxk)
[React- Redux 入門]
(https://qiita.com/shtwangy/items/4f9993ade64c3c6858d3)