🍉

Redux Toolkitの値を表示する

2024/08/11に公開

React

TypeScript

Redux

tech

stateとして持っている値を表示する

FlutterのRiverpodを使ってる人の感覚だと、なかなか馴染めないが、Reduxと呼ばれてる状態管理ライブラリを使うときに、値を表示するだけやってみたかったが、どうしたらいいものかと思った。useStateだったらすぐわかるのだが、Reduxは難しいと思った。

クラスで書いてないしな。でも仕組みはなんとなくわかった。stateには、初期値があって、それを操作することができる。状態管理してくれるもの。試しにダミーの値を入れたものを表示するのをやってみた。

Storeを作成

アプリケーションの全ての場所から、アクセスすることができるStoreを作成する。１アプリケーション、１ストアらしい。１ファイル作ったら、もう１個作ることはない。このファイルに追加していく。

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

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

全てのコンポーネントへアクセスできるように、Providerを作成する。FlutterでもProviderなるものを使って、他のクラスにアクセスして、値を参照するのをやったりするので、仕組みは同じですね。どこからでも呼べる。Appコンポーネントを囲んであげるだけで、どこからでもStoreへアクセスすることができるようになる。

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { store } from './redux/store/store'
import { Provider } from 'react-redux'

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

Reduxで状態を管理するときは、RiverpodのNotifierのようなもので、Sliceと呼ばれているものがある。TypeScrpit使ってるので、Stateには、データ型が必要だった。果物の絵文字と名前を連想配列で、初期値として、格納して表示するだけですが、これだけ難しかったですね😅

import { createSlice } from '@reduxjs/toolkit'

// data type
export interface Fruit {
  emoji: string;
  name: string;
}

// state
export interface FruitsState {
  fruits: Fruit[];
}

// initial state
const initialState: FruitsState = {
  fruits: [
    { emoji: '🍎', name: 'Apple' },
    { emoji: '🍊', name: 'Orange' },
    { emoji: '🍇', name: 'Grape' },
    { emoji: '🍌', name: 'Banana' },
    { emoji: '🍑', name: 'Peach' },
    { emoji: '🍍', name: 'Pineapple' },
    { emoji: '🥭', name: 'Mango' },
    { emoji: '🍓', name: 'Strawberry' },
    { emoji: '🍉', name: 'Watermelon' },
    { emoji: '🍒', name: 'Cherry' },
    { emoji: '🥝', name: 'Kiwi' },
    { emoji: '🍅', name: 'Tomato' },
    { emoji: '🥑', name: 'Avocado' },
  ],
};

export const fruitsSlice = createSlice({
  name: 'fruits',
  initialState,
  reducers: {
  },
});


export default fruitsSlice.reducer;

initialStateには、初期値が入ります。
reducersには、ロジックを書きます。今回はなし。

UIで表示するには、useSelectorと呼ばれているものを使います。引数に、RootStateを指定します。state.と書くと、Storeの、オブジェクト内のkeyで指定している場所から、参照することができます。

import { useSelector } from "react-redux"
import { RootState } from "../../store/store"

export const Fruits = () => {
  const fruits = useSelector((state: RootState) => state.fruits)
    
  return (
    <div>
        {fruits.fruits.map((fruit, index) => (
            <div key={index}>
                {fruit.emoji} {fruit.name}
        </div>
        ))}
    </div>
  )
}

export default Fruits

App.tsxでコンポーネントを読み込むと、UIに、フルーツをブラウザに表示できると思われます。

import Fruits from "./redux/features/fruits/Fruits";

function App() {
  return (
    <div className="App">
      <Fruits />
    </div>
  );
}

export default App;

こんな感じですね

感想

値を表示するだけも多くコードを書くから、難しいと感じますが、他のコンポーネントでも状態を共有できるので、便利なパッケージだと思いました。

stateとして持っている値を表示する

Storeを作成

感想

Discussion