React.js+redux構成でaction内でstateを参照する方法

Gakuです(*´Д`)

また、最近ちょこちょこReact.js触っているのですが、action内でstateを参照できる方法を知って、劇的に世界が広がった気がしたのでその方法を備忘録程度に掲載したいと思います。

今までの実装

今までaction内でstateにアクセスする場合、こんな感じで記述していました。

import {playMusic} from './playMusic'

//componentからstateを渡してあげる
export const playNextMusic = (state) =>{
    const searchList = state.searchList
    let nextFlg = false
    let nextVideoId = ""
    searchList.some((v,i) =>{
      if(nextFlg){
        nextVideoId = v.videoId
        return true
      }
      if(v.playing == true)
        nextFlg = true
    })
    return {
      type: 'NEXT_MUSIC',
      resutl: searchList
    }
  }
}

こんな感じですね。
componentからstateを渡してあげて、actionで参照するといった感じです。
「動く」ことはしますが、componentで無駄な「stateを渡す」といった処理を記述する必要があり、システムが大きくなるとなかなか厳しいものがありました。

劇的に世界が広がった実装

そこでいろいろ調べていると、下記のような形で実装している例を見つけました。

import {playMusic} from './playMusic'

export const playNextMusic = () =>{
  return (dispatch,getState) =>{
    //次の動画を抽出する
    const searchList = getState().searchList
    let nextFlg = false
    let nextVideoId = ""
    searchList.some((v,i) =>{
      if(nextFlg){
        nextVideoId = v.videoId
        return true
      }
      if(v.playing == true)
        nextFlg = true
    })
    dispatch(playMusic(nextVideoId))
  }
}

このようにすることで、componentから無駄なstateを渡す必要がなく、「更新に必要な情報のみを渡す」といった実装ができるので大変便利です。
また、私の中で「stateの更新内容記述場所」をreducerかactionかで非常に悩んでいたんですが、この記述方法を知ったことで、完全に「action」とすることができるようになりました。
あと、「dispatch」も使用できる点も気にいっています。

おわりに

reduxのExample眺めていれば、この記述しているのに完全に見落としていた。。。
精進します(*´Д`)

npmパッケージを「さくっ」と公開する

Gakuです。

最近、reactをちまちま触っています。
そんな中で触れることが多いnpmパッケージですが、「自分もnpmパッケージを公開したい!」と思いました。

そこで今回は簡単なreactコンポーネントをnpmパッケージとして公開する手順を備忘録として残したいと思います。

今回作ったもの

今回作ったものは下記になります。
「ブログ読むのめんどくさいよ~」とか「実行しつつ試したい!」という方はご参考下さい。
[blogcard url=”https://github.com/gaku3601/react-helloworld-sample”][/blogcard]
[blogcard url=”https://www.npmjs.com/package/react-helloworld-sample”][/blogcard]

npmパッケージの公開

npmデベロッパーとして登録する

何はともあれ。まず、npmへデベロッパー登録をする必要があります。
登録は下記から可能です。
[blogcard url=”https://www.npmjs.com/signup”][/blogcard]

登録が完了したなら、登録したアカウントとnpmコマンドを紐付けするために下記コマンドを実行します。

npm adduser

emailやpassword等々、先程登録したアカウントの情報を入力すればOKです。
これで公開する準備は整いました。簡単ですね。

HelloWorldコンポーネントを作成する

今回は呼び出すと「HelloWorld」と出力する簡単なreactコンポーネントを作成したいと思います。
まずはnpm initでpackage.jsonを作成しましょう。

$ npm init
name: (react-helloworld-sample)
version: (1.0.0) 0.0.1
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: gaku
license: (ISC) MIT

npmパッケージとして既に公開されている名前は使用出来ませんので注意が必要です。
作成したpackage.jsonはこんな感じ

{
  "name": "react-helloworld-sample",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "gaku",
  "license": "MIT"
}

そしたらHelloWorldコンポーネントを作成します。
src/scriptsへHelloWorld.jsファイルを作成し、以下のように記述します。

import React from 'react'

const HelloWorld = () =>(
  <div>
    HelloWorld
  </div>
)

export default HelloWorld

また、エントリーポイントとなるindex.jsでHelloWorld.jsをexportします。

import HelloWorld from './src/scripts/HelloWorld.js'

export { HelloWorld }

そしてこれらのコードをbabelでコンパイルを行います。
コンパイルを行ったindex.jsのパスをpackage.jsonのmain部分に記述します。

{
  "name": "react-helloworld-sample",
  "version": "0.0.1",
  "description": "",
  "main": "./src/dist/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/babel ./src/scripts --out-dir ./src/dist"
  },
  "author": "gaku",
  "license": "MIT",
}

Exampleプロジェクトの作成

公開するnpmパッケージと同階層にexampleフォルダを作成し、reactアプリケーションを動作させる環境を構築します。
react環境構築の話となってしまうため割愛しますが、詳しくはgithubのexampleフォルダをご確認下さい。
[blogcard url=”https://github.com/gaku3601/react-helloworld-sample”][/blogcard]

Exampleプロジェクトとnpmパッケージの紐付け

[npm link]コマンドを使用すればExampleプロジェクト内で作成中のnpmパッケージを使用することが可能です。
npmパッケージフォルダで[npm link]コマンドを実行し、exampleフォルダ内で[npm link パッケージ名]を実行後、package.jsonのdependenciesに[“パッケージ名”:”*”,]を記述することで紐付けを行うことが可能です。
紐付けが出来ているか確認するにはexampleフォルダ内で[npm ls パッケージ名]を実行してみて下さい。

$ npm ls react-helloworld-sample
example@1.0.0 C:\Users\proga\develop\projects\react-helloworld-sample\example
`-- react-helloworld-sample@0.0.1  -> C:\Users\proga\develop\projects\react-helloworld-sample

このように表示されれば紐付け完了です。

Exampleアプリケーションの作成

exampleアプリケーションでreact-helloworld-sampleを呼び出してみます。

import React from 'react'
import {render} from 'react-dom'

import { HelloWorld } from 'react-helloworld-sample'

render(
  <div>
    <HelloWorld />
  </div>,
  document.querySelector('#content')
)

しかし、この状態でアプリケーションを実行してもnpmパッケージ側に必要なモジュールが入っていないためエラーとなってしまいます。
適宜、必要な依存モジュールをnpmパッケージ側にインストールしてあげて下さい。
これで「HelloWorld」と出力されればアプリケーションの作成は完了です。

作成したnpmパッケージを公開する

公開手順は至極簡単です。下記コマンドをnpmパッケージのフォルダで実行してあげれば公開することが可能です。

npm publish

簡単ですね。バージョンアップを行う場合は、package.jsonのバージョンを上げてあげないとエラーとなってしまうためご注意下さい。
良きnpmパッケージライフを(´・ω・`)ノ

npm公開の注意点

npmパッケージの公開は簡単に可能です。
しかし、一旦公開してしまうと簡単には削除できない点(実際には削除は不可能)で注意が必要です。

npmのポリシー上、一旦公開したパッケージは削除することができないそうです。
(※誰かが作成したパッケージを使用している場合、そのアプリケーションを壊してしまう恐れがあるため。)

今回の記事を書くまでに2つのnpm公開勉強用パッケージを公開していたのですが、削除したい旨をnpmサポートにメールしたところ「削除はできないが開発元npmへパッケージを移譲するという形でなら対応可能」とのことでしたので、そのようにさせて頂きました。
メールも英語でかなりめんどくさかったので、「公開したものは削除できない」と覚えておけばOKかと思います。

以上となります。フロントは楽しいですが、いろいろ勉強しないとなので正直キツイっすわ(´・ω・`)