react-redux

■getting started with react redux
reactでreduxを使用するためのプラグイン
stateの取得(get_state)
stateの更新(dispatch(action))
◾️ReduxとUI layerを結びつける手順

1. Redux storeを作成する

2. updatesを登録する

3. subscriptionの内部

   1. 現在のstore stateを取得する

   2. UI表示に必要なデータを抜き出す

   3. UIを更新する

4. 初期値が必要な場合はUIに初期値を渡してください

5. Redux actionをdispatchすることによってUIの入力を反映させます。

このロジックを手書きをすることも可能ですが、とても繰り返しが多くなってしまいます。
UIパフォーマンスを最適化することは複雑なロジックが必須です。

◾️npxを使用してサンプルを作成する(typescriptを使用する)

npx create-react-app my-app --template redux-typescript

◾️react-reduxを追加する

yarn add react-redux

index.tsxを確認してください。
React Reduxには<Providor />コンポーネントが含まれています。
React ReduxではuseSelectorとuseDispatchのメソッドがあります。
useSelectorはstoreから値を読み取ったり、更新を行います。
useDispatchはactionにdispatchをするためのメソッドです。
Counter.tsxに上記のメソッドの実用例をあります。

---

◾️Why Use React Redux?
Redux自体はスタンドアローンのライブラリで、React, Angular, Vue, Ember, vanilla JSなど、あらゆるUIレイヤーやフレームワークで使用することができます。ReduxとReactは一緒に使われていることが多いですが、それぞれ独立しています。
もし、あなたが何からしらのUI frameworkと一緒にReduxを使用している場合、あなたはUIコードから直接やりとりするのではなく、ReduxとUI frameworkを結ぶつけるためにUI bindingライブラリを使用します。
React ReduxはReactのための公式Redux UI bindigライブラリです。ReduxとReactを一緒に使用する場合は、二つを結ぶつけるためにReact Reduxを使用します。
◾️React Redux Quick Start

# configureStoreからstoreを作成する
import { configureStore } from '@reduxjs/toolkit'

・Provide the Redux Store to React

# React ReduxのProviderからReact componentsに連携する
# Providerにpropとしてstoreを渡す。
<Provider store={store}>
	<App />
</Provider>

・Create a Redux State Slice

import { createSlice } from '@reduxjs/toolkit’
export const conterSlice = createSlice({
 # Sliceの名前
 name: 'counter', 
 # 初期値を定義する
 initialState: {
  value: 0,
 }, 
 # 一つ以上のreducerを設定する
 reducers: {
  increment: (state) => {
   state.value += 1
  },
 }

# Action creatorsはそれぞれのreducersからactionを生成します。
export const { increment } = counterSlice.actions
# reducerをexportする
export default conterSlice.reducer

・Add Slice Reducers to the Store
counter sliceからreducer functionをインポートしてstoreに追加する。
storeを更新の定義をreducerでします。

import { configureStore } from '@reduxjs/toolkit’
import counterReducer from '../features/counter/counterSlice'

# storeにreducerを定義する。
export default configureStore({
 reducer: {
  counter: counterReducer,
 }
})

・Use Redux State and Actions in React Components
React Redux hooksを使用することでReact componentsとRedux storeを連携します。
useSelectorを使用してstoreからデータを読み込む、useDispatchを使用してactionをdispatch
します。

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'

export function Counter() {
 const count = useSelector((state) => state.counter.value)
 const dispatch = useDispatch()

 return (
  <div>
   <button
    onClick={() => dispatch(incremetn()) }
   >
    Incerment
    </button>
  </div>
}

SUMMARY
create a Redux store with configureStore
configureStoreはreducerを受け取ります。
configureStoreは自動でstoreを設定します。
provide the redux store to the react application components
<App />の周りに<Provider>を置きます。
<Provider store={store}>としてRedux storeを渡す
create a redux slice reducer with createSlice
名前と初期値とreducer関数と一緒にcreateSliceを呼ぶ
reducer関数はImmerを使用してstateを更新します。
生成したreducerとactionをexportします。
use the react redux useSelector/useDispatch hooks in react components
useSelectorを使用してstoreからデータを読み込む。
useDispatchを使用してactionをdispatchします。