React에서 Redux 초기세팅

Install

#npm
npm install redux --save
npm install react-redux --save

#yarn
yarn add redux
yarn install react-redux --save

파일 세팅

src/store 리덕스 폴더다.
src/store/index.js 액션 함수들이 저장된 파일이다.
src/store/cartReducer.js 리듀서파일들이 저장되어있는 파일다.
src/store/rootReducer.js 리듀서들을 합쳐주는 파일이다.

src/store/index.js

export const addCart = item => {
  return {
    type: "ADD_ITEM",
    payload: item,
  };
};

export const deleteCart = item => {
  return {
    type: "DELETE_ITEM",
    payload: item,
  };
};

src/store/cartReducer.js

const cartReducer = (state = INITAL_STATE, action) => {
  switch (action.type) {
    case "ADD_ITEM":
      return [...state, action.payload];
    case "DELETE_ITEM":
      return [...action.payload];
    default:
      return state;
  }
};

export default cartReducer;

const INITAL_STATE = [
  {
    isChecked: true,
    product_name: "초기값",
  },
];

src/store/rootReducer.js

import { combineReducers } from "redux";
import cartReducer from "./cartReducer";

export default combineReducers({ cartReducer });

store 생성하기

import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./store/reducers";

const store = createStore(rootReducer);

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <Routes />
      <GlobalStyle />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);