Redux学び_2

今回は前回の続きからです。
前回はReducerのところまでいきました。

Store

⇨stateを保存するところ

今日のやること
・StoreとReducerを関連づける
・Redux（Store）とReactを接続

Storeのimport

１、reduxのモジュール
２、Reducerのimport

import {
  createStore as reduxCreateStore,
  combineReducers
} from "redux";

import {UsersReducer} from "../users/reducers";

createStore関数の定義

１、reduxのcreateStoreメソッドをreturn
２、combineReducersでstateを生成

export default function createStore() {
  return reduxCreateStore(　//reduxのcreateStoreメソッドを別名
    combineReducers({
      users: UsersReducer
    })
  )
}

combineReducers()とは？

１、分割したReducersをまとめる。
２、stateのカテゴリ毎
３、オブジェクトをreturnする。

initialStateの初期状態が入ってくるのかな？

▪️例

combineReducers({
			product: ProductsReducer
      users: UsersReducer
    })

⬇︎ 

{
	product: {
			.
			.
			.
	}
}

{
  users: {
    isSignedIn: false,
    uid: "",
    username: ""
  }
}

StoreとReactアプリの接続

src/index.js

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

export const store = createStore(); //ここでstoreが初めて作られる。

<Provider store={store}>
   <App />
</Provider>,

react-reduxのProviderとは？

１、propsにstoreを渡す。
　⇨上記のようにラップしたコンポーネントにstoreの情報を渡す。
2、Reactコンポート内でreact-reduxのconnect関数を使えるようにする。
　⇨ReactとReduxを接続してstoreを変更できるように

簡単に接続確認

export const SIGN_IN = 'SIGN_IN';
export const signInActions = (useState) => {
  return {
    type: "SIGN_IN",
    payload: {
      inSignedIn: true,
      uid: useState.uid,
      username: useState.username
    }
  }
}

初期状態は、console.logで確認したところ、以下のように。

Object
isSignedIn: false
uid: ""
username: ""
__proto__: Object

const dispatch = useDispatch();　//storeのstateの変更する
const selector = useSelector((state)=> state);　//storeのstateがselectorに入っている状態

console.log(selector.users);

例
<button onClick={ () => dispatch(signInActions({uid:'00000',username: 'kodama'})) }>
    SIGN_IN
</button>

SIGN_INがクリックされた時に以下のようにstateが変更。

{isSignedIn: false, uid: "00000", username: "kodama", inSignedIn: true}
inSignedIn: true
isSignedIn: false
uid: "00000"
username: "kodama"
__proto__: Object

今回は簡単な接続までやりました。
大体Reduxの流れがわかってきたのでいい感じです。

以上、ありがとうございました。