react 勉強メモ 6日目（react/redux: hooksでstoreとの接続）

今回使うのはこんな感じの奴ら

- useDispatch() でActionを呼んでstateを変更できる

- useSelector() で現在のstoreのstateを取得できる

import {useDispatch, useSelector} from 'react-redux';

//必ず定数化しなければならない
const dispatch = useDispatch()
const selector = useSelector((state) => state) //storeのstateが保存するコールバック関数を引数に

index.js側はこんな感じ

import { Provider } from 'react-redux';
import createStore from './reducks/store/store';

export const store = createStore();
ReactDOM.render(
 <Provider store={store}>
   <App />
 </Provider>,
 document.getElementById('root')
)

hooksを使わない場合、connect関数を使う（後で気が向いたらまとめる）がとりあえず useDispatch と useSelector 使えばstateの参照と変更が行える。

前回も書いた気がするけどstore側 combineReducersでReducersを一つにまとめて、stateのデータ構造を持ったオブジェクトをreturnしてあげている。

import {
   createStore as reduxCreateStore, // 自分で作る関数の名前被りを防ぐため
   combineReducers,
} from 'redux';

import {UsersReducer} from '../users/reducers'

export default function createStore() {
   return reduxCreateStore(
       combineReducers( {
           users: UsersReducer
       })
   )
}

## 番外編

index.js でモジュールをまとめたエントリーポイントを作る

親モジュール内の異なるモジュールから「インポート/エクスポート」して、そのモジュールからインポートできるようにすることも可能です。言い換えれば、様々なモジュールからの様々なエクスポートを集約した 1 つのモジュールを作成することができます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export#re-exporting_aggregating

export { default as DefaultExport } from 'bar.js';