Reduxについて学んだ。

はじめに

TECHTRAINで書籍レビューアプリを作成中に
Reduxを学んだのでまとめます。

仕様技術

・TailCSS
・Redux Toolkit
・React

コード

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { Provider } from 'react-redux'
import { store } from './app/store'

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

Pagenation.jsx

import { useDispatch, useSelector } from "react-redux";
import { nextPage, prevPage } from "./features/page/pageSlice";


const Pagenation = () => {

    const dispatch = useDispatch();
    const offset = useSelector((state) => state.page.offset);

    return (
        <>
            <div className="flex justify-center text-xl">
                <button
                    className=" rounded-md px-3 py-3 mx-3 my-3 bg-white"
                    onClick={() => dispatch(prevPage())}
                    disabled={offset === 0}
                >
                    前に
                </button>
                <button
                    className=" rounded-md px-3 py-3 mx-3 my-3 bg-white"
                    onClick={() => dispatch(nextPage())}

                >
                    次に
                </button>
            </div>
        </>
    )
}

export default Pagenation;

pageSlice.js

import { createSlice } from '@reduxjs/toolkit';

const pageSlice = createSlice({
    name: 'page',
    initialState: {
        offset: 0
    },
    reducers: {
        nextPage: (state) => {
            state.offset += 10;
        },
        prevPage: (state) => {
            state.offset -= 10;
        }
    }
});

export const { nextPage, prevPage } = pageSlice.actions;
export default pageSlice.reducer;

store.js

import { configureStore } from '@reduxjs/toolkit';
import pageReducer from '../features/page/pageSlice';

export const store = configureStore({
    reducer: {
        page: pageReducer
    }
});

学んだこと

main.jsx

Provider について

<Provider store={store}> </Provider>で囲うことで、囲われたコンポーネントすべてがstore使用権を得る。
このようにReduxを使うことで、コンポーネントどうして情報を簡単に共有することができる。

Pagenation.jsx

useDispatch() -> Reduxに変更を命令するためのもの

const dispatch = useDispatch();
dispatch(prevPage()) 

このように変更命令を与えることができる。

const offset = useSelector((state) => state.page.offset);
ここのstateの中身は、Providerで渡されたstoreの内容が入っている。
またuseSelector() は状態を読むという動作をするため、offsetを読みoffsetに渡している。

pageSlice.js

createSliceでSliceを作成していく。

name ではSliceの名前を定義する。

initialState では最初の状態を設定する

reducers では状態を変更する関数を定義する。

最後に作成した関数を外部ファイルでも使用できるようにexportする。

最後に

レイアウトをCSSではなく、Tailwind CSS で書きましたが、CSSと書き方が異なり少し苦戦しました。
後は使い続けて慣れていくしかないですね。
CSSファイルを作成する必要がない点は便利だなと感じました。

Reduxについてですが、現在はファイル数あまり多くないためそこまで必要性を感じませんでしたが、ファイル数が多くなるとコンポーネント間での情報共有管理が難しくなり、バグに繋がるそうなので今のうちから積極的に使用していきたいと思います。