純粋な関数(Pure Function)は、副作用のない関数を指します。これには次の2つの特性があります。
1. 同じ入力に対して必ず同じ結果を返す
・入力値が変わらない限り、常に同じ出力を返します。(参照透過性)
・例: const add = (a, b) => a + b;
2. 副作用を持たない
・関数外の状態に影響を与えたり、関数外の状態から影響を受けたりしません。
・例: グローバル変数を変更しない、APIコールやファイルシステムの操作をしない
プログラムにおける副作用は、関数が以下のような状態変化や外部とのやりとりを行うことを指します。
1. 外部データの読み書き
・データベース、ファイルシステム、ネットワーク通信、ブラウザのローカルストレージなど。
・例: ファイルを書き込む、APIからデータを取得する
2. グローバル変数や外部状態の変更
・関数外の変数を変更すること。
・例: グローバルなカウンタ変数をインクリメントする
3. ユーザーインターフェースの操作
・DOMの変更やアラート表示など。
・例: ユーザーにアラートを表示する、DOMの要素を直接操作する
4. ランダム性の導入
・関数の結果がランダムである場合。
・例: Math.random() のような乱数生成
5. 時間に依存する要素
・関数の結果が時間に依存する場合。
・例: Date.now() を使う
useSelector(selectorFunction)
は、selectorFunction
を使用して Redux ストアの状態から特定の部分を選択します。このフックを使用すると、コンポーネントは選択した状態の部分が更新されるたびに再レンダリングされます。const dispatch = useDispatch()
でフックを使用して、dispatch
関数を取得します。この関数を通じてアクションをディスパッチすることができます(例: dispatch({ type: 'ACTION_TYPE' })
)。const store = useStore()
でフックを使用して、Redux ストアのインスタンスを取得します。これは、主に現在のストアの状態へのアクセスや、ストアの dispatch
関数の使用を目的としていますが、通常は useSelector
や useDispatch
によってカバーされるため、useStore
の使用は限定的です。bindActionCreators
ユーティリティに基づいており、特定のアクションクリエーターを簡単に使用できるようにします。bindActionCreators
を使用してカスタムフックとして簡単に作成できます。アクションクリエーターをディスパッチ関数にバインドし、その結果として得られるバインドされたアクションクリエーター関数をコンポーネントから直接呼び出すことができます。https://zenn.dev/luvmini511/articles/819d8c7fa13101
https://zenn.dev/forcia_tech/articles/20220428_hatano_redux_reselect
Redux-Thunkで非同期処理ができる仕組みを理解しよう #React - Qiita
unwrap() して使用します
const resultAction = await dispatch(fetchUserData(userId));
const user = unwrapResult(resultAction);
または
const resultAction = await dispatch(fetchUserData(userId)).unwrap();