[트위터클론] 5. 리덕스 적용

// reducers/post.js

export const initialState = {
  mainPosts: []
}

const ADD_DUMMY = 'ADD_DUMMY'

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_DUMMY: {
      return {
        ...state,
        mainPosts: [action.data, ...state.mainPosts]
      }
    }
  }
}

export default reducer

// reducers/index.js

import { combineReducers } from 'redux'
import post from './post'

const rootReducer = combineReducers({
  post
})

export default rootReducer

next에서는 store를 컴포넌트에 래핑하기 위해 next-redux-wrapper 를 설치해준다.

// _app.js
import withRedux from 'next-redux-wrapper'
import reducer from '../reducers'
import { createStore } from 'redux'

const Main = ({ Component }) => {
  return (
    ...
  )
}

export default withRedux((initialState, options) => {
  const store = createStore(reducer, initialState)
  return store
})(Main)

크롬리덕스 데브툴을 쓰기 위해서 아래와 같이 세팅해준다.

import { createStore, compose, applyMiddleware } from 'redux'

export default withRedux((initialState, options) => {
  const middlewares = []
  const enhancer = compose(
    applyMiddleware(...middlewares),
    typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined' ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) => f,
  )
  const store = createStore(rootReducer, initialState, enhancer)
  return store
})(Main)