cra리엑트에 리덕스 끼얹기

서정욱 [marvin]·2021년 4월 23일
0
   

디렉터리 설계방법이 굉장히 다양한데
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'  

… 작성중…

profile
JavaScript 개발자입니다

0개의 댓글