[Redux] #3.0 Setup ~ #3.1 Connecting the Store

초보자를 위한 리덕스 101을 바탕으로 작성했습니다.

 

 

Setup

구조를 이렇게 바꿔주었다

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("root"));

// Home.js
import React, { useState } from "react";

function Home() {
  const [text, setText] = useState("");
  function onChange(e) {
    setText(e.target.value);
  }
  function onSubmit(e) {
    e.preventDefault();
    setText("");
  }
  return (
    <>
      <h1>To Do</h1>
      <form onSubmit={onSubmit}>
        <input type="text" value={text} onChange={onChange} />
        <button>Add</button>
      </form>
      <ul></ul>
    </>
  );
}

export default Home;

Home.js에서는 간단한 To Do 입력 폼을 만들어줌

React Hook의 useState를 이용함

// App.js
import React from "react";
import { HashRouter as Router, Route } from "react-router-dom";
import Detail from "../routes/Detail";
import Home from "../routes/Home";

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home}></Route>
      <Route path="/:id" component={Detail}></Route>
    </Router>
  );
}

export default App;

App.js에서는 Route를 2개를 만들어줌

 

 

 

Connecting the Store

Redux 사용을 위해 store.js 파일을 생성한다

import { createStore } from "redux";

const ADD = "ADD";
const DELETE = "DELETE";

//action creator
export const addToDo = (text) => {
  return {
    type: ADD,
    text,
  };
};

export const deleteToDo = (id) => {
  return {
    type: DELETE,
    id,
  };
};

const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [{ text: action.text, id: Date.now() }, ...state];
    case DELETE:
      return state.filter((toDo) => toDo.id !== action.id);
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

이 부분 처리하는 방식은 바닐라 jS에서 했던 방식과 동일

변화가 생기면 Application의 변화가 일어난 부분을 다시 render하기 위해 subscribe 사용할 것

-> subscribe는 변화가 생기면 알려주는 역할을 함

subscribe를 사용하기 위해 redux-react가 필요!

 

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

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

index에서 store에 내 Application을 연결한다

Provider는 store가 필요하므로 store 속성에 store ( from "./store" )를 할당해줌