Redux

- 설치

yarn add redux react-redux @reduxjs/toolkit

 

- store

import { configureStore } from "@reduxjs/toolkit";
import reducer from "./reducer";

const store = configureStore({
  reducer: {
    reducer: reducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

 

- reducer

import { PayloadAction, createSlice } from "@reduxjs/toolkit";

interface IReducerState {
  accessToken: string;
}

const initialState: IReducerState = {
  accessToken: "",
};

const reducerSlice = createSlice({
  name: "reducer",
  initialState: initialState,
  reducers: {
    setAccessToken(state, action: PayloadAction<string>) {
      state.accessToken = action.payload;
    },
  },
});

export const reducerActions = reducerSlice.actions;
export default reducerSlice.reducer;

 

- index

import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import store from "./redux/store";
import { Provider } from "react-redux";

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

reportWebVitals();

 

 

- ex

import { configureStore } from "@reduxjs/toolkit";
import reducer from "./reducer";
import sppReducer from "./sppReducer";

const store = configureStore({
  reducer: {
    reducer: reducer,
    sppReducer: sppReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

import { PayloadAction, createSlice } from "@reduxjs/toolkit";
import { ISolarDataFromBack } from "../interfaces/api.interface";

interface IReducerState {
  solarData: ISolarDataFromBack[];
}

const initialState: IReducerState = {
  solarData: [],
};

const sppSlice = createSlice({
  name: "reducer",
  initialState: initialState,
  reducers: {
    setSolarData(state, action: PayloadAction<ISolarDataFromBack[]>) {
      state.solarData = action.payload;
    },
  },
});

export const sppActions = sppSlice.actions;
export default sppSlice.reducer;

 

const dispatch = useDispatch()

dispatch(sppActions.setSolarData(filteredSolarData))

 

const solarData = useSelector((state: RootState) => state.sppReducer.solarData)