[ React ] redux

🔴  Introduction

⚪  자바스크립트 상태관리 라이브러리

 

🟠  Official

Redux 시작하기 | Redux

 

🟡  Install

 

npm i redux react-redux
npm i @reduxjs/toolkit
npm i redux-logger
npm i redux-thunk

 

🟢  Usage

 

// [ index.jsx ]
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store/store";

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

 

// [ store.js ]
import { configureStore } from "@reduxjs/toolkit";
import logger from "redux-logger";
import ReduxThunk from "redux-thunk";
import pageReducer from "./slices/pageSlice";

const store = configureStore({
    reducer: {
        page: pageReducer,
    },
    middleware: (getDefaultMiddleware) => [
        ...getDefaultMiddleware({ serializableCheck: false }),
        logger,
        ReduxThunk,
    ],
});

export default store;

 

// [ pageSlice.js ]
import { createSlice } from "@reduxjs/toolkit";

export const PageSlice = createSlice({
    name: "page",
    initialState: {
        currentPage: "1",
    },
    reducers: {
        setCurrentPage: (state, { payload }) => {
            state.currentPage = payload;
        },
    },
});

// redux-thunk function usage
export const checkValid =
    ({ keys, onSuccess = (f) => f, onFail = (f) => f }) =>
    (dispatch, getState) => {
        // dispatch 이전에 먼저 처리할 비즈니스 로직 구현
        if (keys) return onSuccess();
        return onFail();
    };

export const { setCurrentPage } = PageSlice.actions;
export default PageSlice.reducer;

 

// [ Usage Component ]
import { useSelector, useDispatch } from "react-redux";
import { setCurrentPage } from "../../store/slices/pageSlice";

const Component = () => {
  // set redux state
  const dispatch = useDispatch();
  const setPage = dispatch(setCurrentPage((prev) => prev + 1));
  
  // get redux state
  const curPage = useSelector((state) => state.page.currentPage);
  
  // usage of redux-thunk
  dispatch(checkValid({ option });
}