디렉터리 설계방법이 굉장히 다양한데
redux 디렉토리를 만들어서 관리하는 방식으로 구현해본다면?
src
- component
subscribers.js
display.js
- redux
stors.js
- subscribers
types.js
{ADD_SUBSCRIBER}
{REMOVE_SUBSCRIBER}
actions.js
reducer.js
{initialState}
{subscribersReducer(state,action) -> switch (ADD... / REMOVE... / default)}
app.css 간단하게 바꾸기
component만들고 app.js 에 컴포넌트 적용
types 먼저 상수로 만들어서 export
import 해서 actions 만들기
reducer 만들고 actions 분기처리
store에 reducer 불러와서 store create 하면 됨
app에서는 {provider} from react-redux 로 감싸주어야 한다.
<Provider store={store}>
component 에서는 connect로 연결해주어야됨 { connect } from react-redux
이 커넥트를 이용하면 다른 컴포넌트들에게도 store의 상태를 연결해줄 수 있다.
export default connect(mapStateToProps)(Subscriber)
redux connect로 검색을 해보면 중간에 들어가는 parameter들을 알 수 있다.
const mapStateToProps = (state) => {
return {
count: state.count
}
}
component 에서 { action } from actions
함수버전
const mapDispatchToProps = (dispatch) => {
return {
addSubscriber: () => dispatch(addSubscriber()) // 받아온 action을 연결해주는 거다.
}
}
객체버전
const mapDispatchToProps = {
addSubscriber
}
다른 reducer를 만든다면? combine reducer 를 만들어야한다.
redux/Rootreducer.js
import { combineReducer} from 'redux'
import subReducer from ''
import viewReducer from ''
const rootReducer = combineReducers({
views: viewReducer,
subs: subReducer
})
export default rootReducer;
store.js
rootReducer from './rootReducer'
const store = createStore(rootReducer);
기존 state.count 에서
state.subscribers.count 로 변경 후
destructuriong 을 통해 { subscribers } 로 가져옴,
subscribers.count로 변경
redux안에 export용 종합 action 파일 index.js 만들기
export { addSubscriber, removeSubscriber} from './subscribers/actions'}
export { accView } from './views/actions'
… 작성중…