関わっているプロジェクトで使われていたりするんですけど、導入をしたことがなくて。既に導入されているからActionだけ新しく書けばOK〜、ってパターンが多いのです。

でもそれだと、自分だけでなんか作る時困っちゃうので、導入手順も把握しておきたいなと。

いざ導入調べてみると、「いろいろあって手順がよくわかんないよ！！！」なーんてことがよくあるので、自分用にまとめておきます。

インストール

とりあえず必要なパッケージをインストールします。

npm install --save redux
npm install --save react-redux

導入してみる

では早速導入！

まず、srcディレクトリの直下にreducer.jsを作成します。

const initialState = {
  name: 'ピヨちゃん'
}

const reducer = (state = initialState, action) => {
  switch(action.type) {
    case 'SET_NAME':
      return {
        ...state
        type: action.type,
        name: action.name
      };
    default:
      return state;
  }
}

export default reducer;

次に、index.jsでRedux関連のモジュールをインポートします。必要な箇所以外は省略していますが、Create React App CLIを使用していればだいたい同じかと思います。

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducer';
...<< 省略 >>...


const store = createStore(reducer);
export default store;

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, 
  document.getElementById('root')
);

はい、これでstoreの設置は終わりました。アクセスはできますが、変更はまだできません。

では、変更できるようなActionを作成します。srcの直下にaction.jsというファイルを作成します。

export const setUserName = (name) => {
  return {
    type: 'SET_NAME',  // typeは先ほどreducer.jsで設定したtypeと同じものにします
    name: name
  }
}

次は、ストアを変更したい時...この場合nameというものを変更したいので、Actionとして作成したsetUserNameを呼び出します。

...

import store from './index';
import { setUserName } from './action';

...<<省略>>...

changeName  = ( ) => {
    store.dispatch(setUserName('おんぷくん'));
}

...

store.dispatch()の中で呼び出すという点に注意です。私はよく忘れて「あれ...ストアの更新ができていない...？」ってことになります。

ちゃんと書き換わっているのか、手っ取り早くログで確認してみましょう。先ほどのstore.dispatch()の1行後とかでよいかと思います。

console.log(store.getState());

これでストアのnameがピヨちゃんからおんぷくんに変わったことが確認できるかと思います。

typeがSET_NAMEに、nameがおんぷくんになっていればOKです。

まとめ

では手順をもう一度おさらいしてみます。

必要パッケージをインストール
reducerを作る
actionを作る
actionを呼ぶ

あとはもっと応用的なことができればいいのですが、結構ハードル高いですね...

オタクプログラマーの趣味ブログ

オタクでありプログラマーである私の完全なる趣味のブログです。いろんなことに中途半端に手を出すので内容は浅め。

ReactでReduxを使ってみる

インストール

導入してみる

まとめ