React블로그

리엑트 블로그 만들기 1 - 초기 setting 하기

리엑트 블로그 만들기 1 - 초기 setting 하기

yarn add axios redux react-redux redux-saga react-router-dom connected-react-router dotenv bootstrap reactstrap

Root Reducer 생성

/src/redux/reducers/index.js

import { connectRouter } from 'connected-react-router';
import { combineReducers } from "redux";

// Root Reducer를 생성한다.
const createRootReducer = (history) => combineReducers({
    router: connectRouter(history),
});

export default createRootReducer;

Root Saga 생성

/src/redux/sagas/index.js

import { all } from 'redux-saga/effects';

// Root Saga를 생성한다.
export default function* rootSaga() {
    yield all([]);
}

Store 만들어주기

src/store.js

import { createStore, compose, applyMiddleware } from 'redux';
import createSagaMiddleware from '@redux-saga';
import { createBrowserHistory } from 'history';
import { routerMiddleware } from 'connected-react-router';

import createRootReducer from './redux/reducers';
import rootSaga from './redux/sagas';

export const history = createBrowserHistory();

const sagaMiddleware = createSagaMiddleware();

const initialState = {};

const middleware = [sagaMiddleware, routerMiddleware(history)];
const devtools = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__

const composeEnhancer = process.env.NODE_ENV === 'production' ? compose : devtools || compose;

const store = createStore(
    createRootReducer(history),
    initialState,
    composeEnhancer(applyMiddleware(...middleware))
)

sagaMiddleware.run(rootSaga);

export default store;

Router 생성하기

src/routes/Router.js

import React, { Fragment } from 'react'
import Header from '../components/Header'
import Footer from '../components/Footer'

const MyRouter = () => {
    <Fragment>
        <Header>
            <h1>Hello Body</h1>
        </Header>
    </Fragment>

}

export default MyRouter;

Redux와 Router 적용해주기

src/app.js

import React from 'react'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'connected-react-router'
import store, { history } from './store'
import MyRouter from './routes/Router'
import "bootstrap/dist/css/bootstrap.min.css";
import './assets/custom.scss'

function App() {
  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <MyRouter />
      </ConnectedRouter>
    </Provider>
  );
}

export default App;
Share