React-Reduxs

reduxs의 중요한 3가지

store

• 리덕스의 상태를 가지는 단일 객체

import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./store/reducers";
const store = createStore(rootReducer);
ReactDOM.render(
  <Provider store={store}>
    <Routes />
  </Provider>,
  document.getElementById("root")
);

action

• 스토어 어떤 값을(payload) 어떻게(type) 업데이트 할 지 적어놓는 객체
  액션 생성함수는 그 액션 객체를 생성하는 역할을 하는 함수
  액션 객체를 dispatch 메서드에 넣어서 호출하면 리듀서를 거쳐 스토어를 업데이트 한다.

export const addCart = (item) => { // 액션 "생성 함수"
  return {
    type: "ADD_ITEM", // 액션 "객체"
    payload: item,
  };
};

reducer

• reducer는 action이 발생했을 때 새로운 상탯값을 만드는 함수

// store/reducer/index.js
import { combineReducers } from "redux";
import cartReducer from "./cartReducer";
export default combineReducers({ cartReducer });
// cartReducers.js
function cartReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case "ADD_ITEM":
      return [...state, action.payload];
		case "DELETE_ITEM":
			return [...action.payload]
    default:
      return state; 
  }
}

Reduxs 상태 값 사용법

Reduxs 폴더 구조

예시) 장바구니 페이지
src
├── Components
│ ├── CartItem.js
│ ├── CartNoti.js
│ ├── ProductCard.js
│ └── Nav.js
├── Pages
│ ├── CartList.js // 상품 리스트 페이지
│ └── ProductList.js // 장바구니 페이지
├── Routes.js
├── index.js
└── store
├── actions
│ └── index.js // 액션 객체들
└── reducers
├── cartReducer.js // 개별 리듀서
└── index.js // 루트 리듀서