Redux 셋팅

redux를 왜씀?
-전역에서 state관리를 해줄수 있기때문

전역에서 state관리하는게 편하냐?
-props를 통해 state드릴링을 할필요가 없기때문

기본설치

• npm i redux
• npm i redux-react

스토어가 object 가아닌 다른 형식(promis, function)의 데이터도 받을수 있도록하는 미들웨어

• npm i redux-promise(임포트했는데 에러가날경우 에러매새지에 type을 설치하라는 것을 따라하면된다)
• npm i redux-thunk

리덕스는 기본적으로 action=>reducer=>store의 형식으로 state가 관리된다.

리덕스 셋팅 순서

1. actionTypes.ts 파일에 actions의 타입을 정의한다.

export const DEFAULTACTIONS = "defatulActions";
export const DEFAULTACTIONSNAMECHANGE = "defatulActionsNameChange";

2. actions.ts 파일에 actions을 정의한다.(여기서 redux-promise를 통해 axios와 같은 primse 객체를 통해 값을 받아 return 할수도있다.

import { DEFAULTACTIONS, DEFAULTACTIONSNAMECHANGE } from "./actionTypes";
export const defautdActions = () => {
   // axios같은 promise의 값을 받아 return에 추가 할수도 있다.
   return { type: DEFAULTACTIONS };
};
export const defautdActionNameChange = () => {
   return { type: DEFAULTACTIONSNAMECHANGE };
};

3. reducer.ts파일에 switch-case형식으로 action을 처리하는 펑션을 만든다.

import { DEFAULTACTIONS, DEFAULTACTIONSNAMECHANGE } from "./actionTypes";

type ActionType = { type: string };

const defaultState = {
   result: "기본",
};
const defaultReducer = (state = defaultState, action: ActionType) => {
  // 만약 actions에서 프로미스 객체를 반환한 값을 받을 수 있다.
   console.log(action);
   switch (action.type) {
      case DEFAULTACTIONS:
         return { ...state };
      case DEFAULTACTIONSNAMECHANGE:
         return { ...state, result: "default" };
      default:
         return state;
   }
};
export default defaultReducer;

4. index.tsx에서 provider를 통해 store을 전달하자.

//.. 여러 임포트들
import promiseMiddleware from "redux-promise";
import ReduxThunk from "redux-thunk";
import { Provider } from "react-redux";
import { applyMiddleware, createStore } from "redux";
import reducers from "./Redux/combineReducers";
import logger from "redux-logger";

const store = createStore(reducers, applyMiddleware(promiseMiddleware, ReduxThunk, logger));
ReactDOM.render(
   <React.StrictMode>
      <Provider store={store}>
         <App />
      </Provider>
   </React.StrictMode>,
   document.getElementById("root")
);
reportWebVitals();

5. component에서 dispatch펑션에 actions펑션을 넣어 값을 변경하자

const dispatch=useDispatch()
dispatch(defautdActions())