React + Reduxを基本からまとめてみた【5】【Storeとの接続】

Fluxフロー図

![flux_flow.png]
(https://camo.qiitausercontent.com/cdd0824a85a48f51dacc8ec20fa5cf5ce6ec8093/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3434303539332f33313139643830622d383163642d633664382d636233312d6132383837386261313738312e706e67)

Storeとは

Storeはstateを保存する

1. StoreとReducersを関連づける
2. Redux(Store)とReactを接続する
3. Storeの状態を変更する

Store | モジュールのimport

1. reduxモジュールのimport
2. Reducersのimport

store.js

Copied!

//src/deducks/store/store.js
// 1.reduxモジュールのimport
import {
    createStore as reduxCreateStore,
    combineReducers
} from 'redux';

// 2.Reducersのimport
import { ProductsReducer } from '../products/reducers';
import { UsersReducer } from "../users/reducers";

Store | createStore関数の定義

1.reduxのcreateStoreメソッドをreturn
2.combineReducersでstateを生成

store.js

Copied!

//src/deducks/store/store.js
export default function createStore() {
    // 1.reduxのcreateStoreメソッドをreturn
    return reduxCreateStore(
        // 2.combineReducersでstateを生成
        combineReducers({
            products: ProductsReducer,
            users: UsersReducer
        })
    );
}

combineReducersとは

1.分割したReducersをまとめる
2.stateのカテゴリ毎
3.オブジェクトをreturnする(stateのデータ構造)

sample.js

Copied!

combineReducers({
  products: ProductsReducer,
  users: UsersReducer
})
//     ⬇︎
{
  products: {
    // productsのstate
  },
  users: {
    isSignedIn: false,
    uid: "",
    username: ""
  }
}

StoreとReactアプリの接続

src/index.js

Copied!

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import createStore from "./reducks/store/store";
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

export const store = createStore();

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

react-reduxのProviderとは

1. propsにstoreを渡す

⇨ ラップしたコンポーネントにstoreの情報を渡す

1. Reactコンポーネント内でreact-reduxのconnect関数を使えるようにする

⇨ reactとReduxを接続してstareを変更できるように

参考サイト

[日本一わかりやすいReact-Redux入門#6...Redux(Store)とReactを接続してstateを変更しよう]
(https://www.youtube.com/watch?v=t_-Tpc913B4)
[React- Redux 入門]
(https://qiita.com/shtwangy/items/4f9993ade64c3c6858d3)