DAY35 <REDUX 정복해보기>

Redux

Redux는 state management( 상태관리) 라이브러리로 보다 편리하게 state를 저장하고 수정할 수 있는 공간이다.

• redux는 프로젝트 외부에 있는 스테이트를 저장하기 위해서도 사용된다.

index.js

<provider store={store}
  <App/>
 </Provider>

provider는 redux에 있는 state를 사용하기 위해 쓰는 컴포넌트로 provider로 없으면 보이지 않는다.

store.js

const RootReaduer=combineReducers({
파일
})
const store = createStore(combineReducers);

createStore

store에 있는 createStore는 상태 관리를 할 Store를 만들어주는 역할을 하고 인자 값에는 상태를 수정할 수 있는 reducer함수가 들어간다. combineReducers를 사용할 경우 인자 값에 combineReducer를 넣어주면 된다.

combineReducers

combineReducers는 여러개의 reducer함수를 한번에 묶어주는 역할을 하며 reducer함수를 기능별로 나누어 여러개 작업을 할 때 combineReducers 안에 넣어서 사용한다.

Module

Module 파일을 생성해서 reducer를 관리한다.

Ducks pattern

moule에는 action type, action creator, reducer가 포함된다.

//action type
const EX_AMPLE = "EX_AMPLE"

//action creator payload 받아서 객체를 return 해준다. 
export example= (payload)=>{
typle:EX_AMPLE,
payload}

//reducer state를 return 해준다. switch 의 return 은 (redux의 state를 바꾸는 역할을 한다.)
const initialState={
}

export default Reducer(state=initialState, action){
  switch(action.type){
    case EX_AMPLE:
      return{
      };
    default:
      return state;
  }
}

• dispatch 된 action creator는 root reducer로 이동 된 뒤 reducer로 다시 이동한다. 그 후 새로운 state를 리턴한다.