Easy Peasyを使用してReduxの機能を実現する。

javascript

本記事では、reactなどの状態管理するためのフレームワークの一つとしてreduxがありますが、今回はその代替機能であるeasy-peasyの使い方をまとめます。easy-peasyは今回業務で触れる機会があったため、勉強も含めて記事にまとめます。

基本的に、公式ドキュメントの内容を参考にしており、補助的な内容を書いておりますので、公式でわからないところがあればこちらの記事を参考にしていただければと思います。

Reduxとは

Reduxとは、Reactとは別で状態管理だけのためのライブラリ。Reactでは、useState等にあたります。

フレームワークであるため、reactだけでなく他のjs(jQuery等)でも使用されるみたいです。

Storeと呼ばれるデータを保存する場所があり、ここのデータを変更したり使用したりしていきます。データベースとは違って保存されるデータは変わっていくため、すぐ取り出せるようになっています。

Reduxの特徴としては、global stateの管理が容易ということです。ReactにもuseContextを使用することで、ページ間の状態管理を引き継ぎさせることはできるのですが、コードが複雑になってしまうなど、管理が難しくなります。Reduxを使うことで状態管理はグローバルに行うことができるため、大規模アプリを作成する際にコードがわかりやすくなるという特徴があります。

本記事では、Reduxを使用できるライブラリである、easy-peasyについて説明していきます!

easy-peasyを初期設定する。

easy-peasyをインポートする

"easy-peasy": "^5.0.3",

packeage.jsonに記入して、npmならnpm install 、yarnなら、yarn installすればeasy-peasyを使用することができます。

ストアを作成する。

グローバルで使用するための状態管理のデータを保存するために、storeを作成します。ルートディレクトリにstoreフォルダを作成し、store.js(typescriptの場合はstore.ts)を作成し、以下を記述します。

import { createStore } from 'easy-peasy'

const store = createStore({
  todos: [],
})

ストアをReactアプリにバインドする

import { StoreProvider } from 'easy-peasy';
import { store } from '../store/store'; // 上記store.jsのパスに合わせて設定してください。

ReactDOM.render(
  <StoreProvider store={store}>
    <App />
  </StoreProvider>,
  rootEl,
);

<StoreProvider>で<App />を囲むことで、App全体でeasy-peasyの状態管理を使用できるようになります。

easy-peasyによる状態管理を使用できるようにする。(useStoreState)

import { useStoreState } from 'easy-peasy';

function Todos() {
  const todos = useStoreState((state) => state.todos);
  return (
    <ul>
      {todos.map((todo) => (
        <li>{todo.text}</li>
      ))}
    </ul>
  );
}

4行目のconst todos = useStoreState((state) => state.todos);に注目してください。

useStoreStateの部分でeasy-peasyで管理している状態を使用することができ、store.jsで管理しているstate.todosを使用することができます(設定した下記の部分です。)。

import { createStore } from 'easy-peasy'

const store = createStore({
  todos: [],
})

todos: []とコード上ではかかれていますが、todosには実際は値が入っています。次のactionコマンドにてデータを追加していく方法を説明していきます。

easy-peasyによって状態を更新する(action)

import { createStore, action } from 'easy-peasy';

const store = createStore({
  todos: [],
  addTodo: action((state, payload) => {
    state.todos.push({ text: payload, done: false });
  }),
});

store.jsにaddTodoを追加します。このコマンドがtodosに値を追加していく処理になります。そして、front側のプログラムに以下を追記します。

import { useStoreActions } from 'easy-peasy';

function AddTodoForm() {
  const addTodo = useStoreActions((actions) => actions.addTodo);
  const [value, setValue] = React.useState('');
  return (
    <>
      <input onChange={(e) => setValue(e.target.value)} value={value} />
      <button onClick={() => addTodo(value)}>Add Todo</button>
    </>
  );
}

上記で注目する部分は、4行目と9行目です。

store.jsでアクションとして定義されたものは4行目のようにuseStoreActionを使用して、フロントエンドjsファイルで使用できるようになります(4行目)。

このように定義することで、9行目でのvalue(8行目インプットタグ内での記載内容)が引数として渡され、store.jsのaddTodoのpayloadで受け取ります。

easy-peasyで非同期処理を行う(thunk)

import { action, thunk } from 'easy-peasy';

const model = {
  todos: [],
  addTodo: action((state, payload) => {
    state.todos.push(payload);
  }),
  saveTodo: thunk(async (actions, payload) => {
    const { data } = await axios.post('/todos', payload);
    actions.addTodo(data);
  }),
};

thunkは、直接値を変更することはできませんが、上記のように処理を書くことで、actionの値を変更することができます。このように、その関数自体は値を変更することはないが、その関数を用いて値を変更する「処理」のことをディスパッチすると言います。

また、内部は非同期処理をすることが可能であり、通常のasync await構文を使用することができます。

easy-peasyのまとめ

今回、easy-peasyを使用することで、今まで使ったことのなかったreduxについて理解することができました。javascriptは、type-scriptやサーバーサイドで動かすことのできるprismaなど、覚えたいことがたくさんあるので、ひとつずつ身につけていきたいなと思います。

コメント

タイトルとURLをコピーしました