redux를 이용해 web app을 만들어보자

1. react 환경설정

npx creat-react-app

명령어를 이용해 react 환경설정을 한 뒤

npm run start로 시작

 

2. redux 설치

npm install redux

redux를 설치한 뒤 store.js 파일을 만든다

 

3. store.js 파일을 생성하고, 그 안에 reducer 함수와 초기 state값을 생성

import { createStore } from "redux";

var initState = {
  mode: "WELCOME",
  welcome_content: {
    title: "WEB",
    desc: "Hello,WEB",
  },
  selected_content_id: 1,
  contents: [
    { id: 1, title: "HTML", desc: "HTML is ..." },
    { id: 2, title: "CSS", desc: "CSS is ..." },
    { id: 3, title: "JS", desc: "JS is ..." },
  ],
};

function reducer(state = initState, action) {
  return state;
}
export default createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

createStore의 두번째 인자로 들어간 것은 chrome의 extention인 redux_devtools를 실행하는 코드

(주의할 점. https://github.com/zalmoxisus/redux-devtools-extension#usage 해당 링크엔 window앞에 + 가 있는데 지워야한다)

 

4. index.js 파일로 가서 App.js를 provider로 감싼 뒤,

provider의 인자로 store를 넘겨줘서 하위 컴포넌트들이 store를 import할 필요 없이 사용할 수 있게 한다

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

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

serviceWorker.unregister();