React Redux 基本構築

自分が忘れないように記録しておきます。
(yarnメインに使っているため基本的にyarnで進んでいきます。)

#React

1. グローバルインストール
   npm install -g create-react-app

2. create-react-app使用
   create-react-app ファイル名

3. 実行
   cd ファイル名
npm run start or yarn start

#Redux

1.　Reduxインストール
yarn add redux react-redux
(この時package.json に redux と　react-reduxが追加される)

package.josn

    "react-dom": "^16.4.2", << 追加される
    "react-redux": "^5.0.7", << 追加される

2.　Reduxを項目中に入れる
ファイル追加

/src/reducers/index.js

import { combineReducers } from 'redux'

import 関連項目名 from './関連項目名'

export default combineReducers({
    関連項目名
})  ;

/src/reducers/項目名.js

const 項目名 = (state = [] , action) => {
    switch (action.type) {
            
        default:
            return state;
    }
};

export default 項目名 ;

管理・開発時ツールを入れる
yarn add redux-logger redux-devtools-extension

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './Components/App';
import { Provider } from 'react-redux';
import registerServiceWorker from './registerServiceWorker';

import { createStore , applyMiddleware } from 'redux'; 
import roodReducer from './reducers'; 
import { composeWithDevTools } from 'redux-devtools-extension';
import logger from 'redux-logger';

const store = createStore(
    roodReducer,
    composeWithDevTools(
        applyMiddleware(logger)
    )
);

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