리덕스 기초

With·2020년 12월 9일
0

리덕스 모듈

Action

Typescript Action type 지정


//as const 를 붙여줘야 한다.
const SET_DIFF = "counter/SET_DIFF" as const;
const INCREASE = "coutner/INCREASE" as const;
const DECREASE = "coutner/DECREASE" as const;

// ReturnType<typeof ~> 형식으로 선언한다.
type TAction =
  | ReturnType<typeof setDiff>
  | ReturnType<typeof increase>
  | ReturnType<typeof decrease>;

//redcer
const counter = (state = initialState, action: TAction) => {};            

Create Action Function

Reducer(state = initialState, action)

Store

dispatch(action)

describe

Redux

combineReducers({reducer, reducer})

createStore(rootReducer)

React-redux

Provider store={sotre}

src / index.tsx

useSelect

  • useSelector는 리덕스 스토어의 상태를 조회하는 Hook입니다.
  • state의 값은 store.getState() 함수를 호출했을 때 나타나는 결과물과 동일합니다.

container / counter.tsx

useDispatch

useDispatch 는 리덕스 스토어의 dispatch 를 함수에서 사용 할 수 있게 해주는 Hook 입니다.

profile
주니어 프론트엔드 개발자 입니다.

0개의 댓글