Redux作成めも - 学習めも。

参考

reffect.co.jp

データ保存場所Store作成（@index.js）

import { createStore } from "redux";

const store = createStore();

export default store;

・createStoreの引数にreducerという関数が必須・reducerは共有を行いたいデータを保持し、reducer関数の中でだけ唯一共有したデータを変更することができます。reducerという名前からは何を行うものなのか全くイメージが湧きませんがReduxで重要な役割を持ちます。

Reducerの作成

import { createStore } from "redux";

const initialState = {
  count: 1,
};

const reducer = (state = initialState) => {
  return state;
};

const store = createStore(reducer);

export default store;

・reducerは共有を行いたいデータを保持し、reducer関数の中でだけ唯一共有したデータを変更することができます。・reducerという名前からは何を行うものなのか全くイメージが湧きませんがReduxで重要な役割を持ちます。・reducer関数はstateの他に引数としてACTIONを指定・作成したreducerをcreateStoreの引数として設定・これでreducerが保持しているstateをStoreの中に保管することができました。

Providerコンポーネント

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux"
import store from "./store/index";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

・ReactのコンポーネントからReduxのStoreにアクセスするためにはProviderコンポーネントが必要・index.jsファイルのルートコンポーネントをProviderコンポーネントで包みます。さらに作成したstoreをimportしてstoreをpropsとして渡します。・Providerでコンポーネントを包むことでreduxという独立した機能をReactと連携させているとイメージ・Providerコンポーネントを利用することでReactのコンポーネントからReduxのデータにアクセスするために必須な要素ですが、Providerだけではアクセスすることはできないのでアクセスするためにconnect関数またはuseSelectorを利用

Connect関数の利用

・Appコンポーネント(App.js)からStoreに保管されているcountへのアクセス・AppコンポーネントからReduxのStoreにアクセスするためにconnectを利用・AppコンポーネントからReduxのStoreにアクセスするためにconnectを利用します。connectには引数としてmapStateToProps関数を指定します。mapStateToProps関数ではStoreの中で設定したstateをAppコンポーネントで利用できる形のpropsへと変換(map)しています。・stateから取り出した値はAppコンポーネントのpropsとして渡すことができます。

const mapStateToProps = state => {
  return { count: state.count }
}

作成したmapStateToPropsの関数をconnectの引数に設定し以下のように記述する必要があります。

Recuxに必要なReduxコンポーネントをインポート(@Content.js)

import { createStore } from "redux";

const reducer = () => {
  console.log("reducer has been called.");
}

const store = createStore(reducer, 1);

▼Stores役割・Dispatcher が処理した結果を蓄え、View がレンダリングするためのデータを格納する役割・Store に蓄えられたものはView にレンダリングされる。

dispatchメソッドの作成(@Content.js)

store.subscribe(() => {
  console.log("store changed", store.getState());
});

store.dispatch({type: ""})

▼Dispatcher役割

参考