Redux 정리👻

redux: 단방향
action: state를 어떻게 바꿀지 행동을 적어놓은 것
dispatch: 액션 실행
reducer: 액션이 실행되면 리듀서에서 새로운 객체를 만들어 내어 state를 대체
새로운 state를 만들어 주는 애(불변성 조심!)

단점:

• action을 미리 만들어놓아야한다.
• 불변성을 지켜야지 타임머신 기능을 사용할 수 있다.

const {createStore} = require('redux')

const reducer = (prevState, action) => {
    switch(action.type){
        case 'LOG_IN':
            return {
                ...prevState,
                user: action.data,
            }
        case 'ADD_POST':
            return{
                ...prevState,
                posts: [...prevState.posts,action.data]
            }
        case 'LOG_OUT':
            return{
                ...prevState,
                user: null
            }
        default:
            return prevState
    }
}

const initialState = {
   user: null,
    posts: []
}
const store = createStore(reducer,initialState)
store.subscribe(()=>{ //react-reudx 안에 들어있음
    console.log('changed') //화면 바꿔주는 코드 여기서
})
console.log(store.getState())

//action = 객체
const login = data => {
    return {
        type:'LOG_IN',
        data
    }
}
const logout = () => {
    return {
        type:'LOG_OUT'
    }
}
const addPost = data => {
    return {
        type:'ADD_POST',
        data
    }
}

store.dispatch(login({
    id: 1,
    name:'jiwon',
    admin: true
}))
console.log(store.getState())

store.dispatch(addPost({
    userId: 1,
    id: 1,
    content: '안녕하세요 리덕스'
}))
store.dispatch(addPost({
    userId: 1,
    id: 2,
    content: '두번째 리덕스'
}))
console.log(store.getState())

store.dispatch(logout())
console.log(store.getState())

리덕스 폴더 구조

(데이터 별로 나누기)

• actions
  • post.js
  • user.js
• reducers
  • index.js
  • post.js
  • user.js

index.js

여러 개의 리듀서를 합칠 때는 combineReducers사용

reducers/index.js

const {combineReducers} = require('redux')
const userReducer = require('./user')
const postReducer = require('./post')

module.exports = combineReducers({
    user: userReducer,
    posts:postReducer
})

미들웨어

미들웨어는 삼단 함수로 되어있다.

const firstMiddleware = store => next => action => {
    console.log('로깅 찍는 미들웨어', action)
  	// 앞
    next(action)//next = distpatch
  	// 뒤로 기능 추가 가능
}

function firstMiddleware(store){

    return function (next){

        return function(action){

        }
    }
}

비동기일때는 함수로 action을 보내서 thunk가 실행을 해준다

const thunkMiddleware = store => dispatch => action => {
    if(typeof action === "function"){ //비동기
        return action(store.dispatch, store,getState)
    }
    return dispatch(action)
}

login action

const logIn = (data) => { //async action creator
    return (dispatch, getState) => {
        dispatch(logInRequest(data))
        try{
            setTimeout(()=>{
                dispatch(logInSuccess({
                    userId: 1,
                    nickname: 'jiji'
                }))
            },2000)
        }
        catch (e) {
            dispatch(logInFailure(e))
        }
    }
}

redux-devtools

npm i reudx-devtools-extension -D

const { composeWithDevTools } = require('redux-devtools-extension')

const enhancer = process.env.NODE_ENV === "production" ?
      compose(
        applyMiddleware(
          firstMiddleware,
          thunkMiddleware,
          )
        )
      : composeWithDevTools(
  		applyMiddleware(
      	 firstMiddleware,
    	 thunkMiddleware,
    )
  )

const store = createStore(reducer, initialState, enhancer)

immer

npm i immer

기본 형태
nextState = produce(prevState, (drfat)=>{})

switch문을 produce 안에 넣어버리기

const produce = require('immer')

const userReducer = (prevState=initialState, action) => {
  return produce(prevState, draft => {
    switch(action.type){
      case 'LOG_IN_REQUEST':
        draft.data = null
        draft.isLoggingIn = true
        break
        ....
    }
  }

리덕스 사가의 필요성

리덕스 자체는 동기적인 요청밖에 못함

제너레이터: 함수 실행을 중간에 멈출 수 있고 원할 때 재개할 수 있어 편하다.

• call: 함수 동기적 호출
• fork: 함수 비동기적 호출
• put: 액션 dispatch