[Redux] 개념 잡기

 

 

 

 

 

 

* 키워드

store : 저장소
action : object 형태. 명령어
reducer : action을 받아서 state를 처리하는 곳
dispatch : reducer에 action을 넣어서 리턴받음

 

 

 

 

// reducer.js

import { combineReducers } from "redux";

let initialState = [
  { id: 1, todo: "코딩하기", isComplete: false },
  { id: 2, todo: "밥먹기", isComplete: false },
  { id: 3, todo: "장보기", isComplete: false },
];

export const operationsReducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_TODO":
      return [...state, action.payload];
    default:
      return state;
  }
};

export const rootReducer = combineReducers({
  operationsReducer,
  //여러 리듀서를 결합한다.
  //더 많은 리듀서를 추가할 수 있다.
});

Reducer는 동일하게 (state, action) 형태의 인자를 가진다.

지금은 Todolist를 구현하는 것이 아니기 때문에 ADD_TODO 로직은 무시하고 넘어가자.

default값으로 initialState 배열을 리턴받은 Reducer를 combineReducers({}) 함수 인자로 넣는다.

 

 

 

 

 

 

 

// store.js

import { createStore } from "redux";
import { rootReducer } from "./reducer";

export const store = createStore(rootReducer);

store는 전체 상태 트리를 가지고 있다. store를 생성하기 위해서 루트 리듀싱 함수를 createStore에 전달한다.

 

 

 

 

 

 

 

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./commons/store";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

수많은 컴포넌트들이 store에 접근 가능하게 하려면, Provider 컴포넌트를 사용해야 한다.

Provider에 감싸진 하위 컴포넌트들이 Redux의 store에 접근할 수 있게 해준다.

이 때, Provider props로 store를 설정해주면 된다.

 

최상위 컴포넌트인 App을 감싸줌으로써 하위의 모든 컴포넌트에서 store에 접근할 수 있게 되었다. 

 

 

 

 

 

 

 

TodoItems.js

import { useSelector } from "react-redux";
import * as S from "../style";

export const TodoItems = () => {
  const todos = useSelector((state) => state.operationsReducer);
  console.log("todos :", todos);
  return (
    <>
      <S.ItemContainer>
        {todos.map((todo) => {
          return (
            <>
              <S.Item>
                <div>{todo.todo}</div>
                <div>
                  <button>수정</button>
                  <button>삭제</button>
                </div>
              </S.Item>
            </>
          );
        })}
      </S.ItemContainer>
    </>
  );
};

useSelector()는 store의 상태값을 반환해준다. 

이제 쉽게 store에 접근할 수 있게 되었다.