// 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)