REDUX 알아보기

Redux는 점점 더 프로젝트 규모가 커지면 상태 값이 업데이트될 때 혼란이 올 수 있는데 이러한 복잡함을 해소해주는 라이브러리라고 한다.

 

리덕스를 사용해보자 사용할 부분을 전에 만들었던 todo를 상태 관리해보려 한다.

 

리덕스 라이브러리 설치

 

yarn add redux react-redux

설치가 다 되었으면 Todo를 복사해서 reduxTodo라고 이름을 바꾼다.

또 리덕스 모듈 폴더와 컨테이너 폴더를 만들어서 사용할 것이다.

 

todo.js에 액션 정의와 액션 생성 함수, 리듀서 함수를 만든다. 

 

modules/todo.js

const INSERT = "todo/INSERT";
const CHECK = "todo/CHECK";
const REMOVE = "todo/REMOVE";

const initialState = {
  todos: [
    {
      id: 1,
      contents: "리액트 연습",
      check: false
    },
...
  ]
};

const insert = contents => ({
  type: INSERT,
  todo: {
    id: id++,
    contents: contents,
    ckeck: false
  }
});

const ckeck = id => ({
  type: INSERT,
  id
});

const remove = id => ({
  type: REMOVE,
  id
});

export { insert, ckeck, remove };

function todos(state = initialState, action) {
  switch (action.type) {
    case INSERT:
      return {
        todos: state.todos.concat(action.todo)
      };
    case CHECK:
      return {
        todos: state.todos.map(todo =>
          todo.id === action.id ? { ...todo, check: !todo.check } : todo
        )
      };
    case REMOVE:
      return {
        todos: state.todos.filter(todo => todo.id !== action.id)
      };
    default:
      return state;
  }
}

export default todos;

 

컨테이너 폴더 안에 해당 컴포넌트 컨테이너를 만든다.

 

import React from "react";
import { connect } from "react-redux";
import { insert, success, remove } from "../modules/todo";
import TodoList from "../components/ReduxTodo/TodoList";

const TodoListContainer = ({ todos, remove, success }) => {
  return <TodoList remove={remove} success={success} todos={todos} />;
};

export default connect(
  ({todos}) => ({
    todos: todos.todos
  }),
  {
    success,
    remove
  }
)(TodoListContainer);

 

 스토어를 생성한다.

 

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore } from "redux";
import rootReducer from "./modules";
import { Provider } from "react-redux";

const store = createStore(rootReducer);

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

serviceWorker.unregister();

 

중간 window로 시작하는 것은 redux devtools로 리덕스 개발자 도구이다.

 

기존 템플릿에 컨테이너를 적용시킨다.

 

import React from "react";
import "./TodoTemplate.css";
import styled from "styled-components";
import TodoListContainer from "../../containers/TodoListContainer";
import TodoInserContainer from "../../containers/TodoInserContainer";


const TodoTemplateBlock = styled.div`
  display:flex;
  width:768px;
  margin: 0 auto;
  margin-top: 100px;
  @media screen and (max-width:768px){
    width:100%;
  }
`


const TodoListBlock = styled.div`
  background: rgb(241, 241, 241);
  min-height: 10rem;
  max-height: 16rem;
  overflow-y: auto;
`;

const TodoTemplate = () => {


 

  return (
    <TodoTemplateBlock>
      <div className="todoTemplate">
        <div className="todoTemplate div">오늘 할 일</div>
        <div>
          {/* <TodoInsert insert={insert} /> */}
          <TodoListBlock>
            <TodoInserContainer />
            <TodoListContainer/>
          </TodoListBlock>
        </div>
      </div>
    </TodoTemplateBlock>
  );
};

export default TodoTemplate;

 

잘되는 것을 볼 수 있다.

 

 

간단히 알아보면 부모에서 자식으로 계속해서 props를 전달하는 것을 컨테이너가 중간과정을 없애준 것을 볼 수 있다.