사용하기

모든 준비가 완료되었습니다. 이제 redux를 사용하러 가겠습니다.

//Subscibers.js
import {connect} from 'react-redux'
import {addSubscriber,removeSubscriber} from '../redux/subscribers/actions'

const Subscribers = ({count,addSubscriber,removeSubscriber}) => {
  return (
    <div className="items">
      <h2>구독자 수 :{ count }</h2>
      <button onClick={()=> {addSubscriber()}}>구독하기</button>
      <button onClick={()=>{removeSubscriber()}}>구독취소</button>
    </div>
  )
}
const mapStateToProps =(state)=>{
  return {
    count:state.count
  }
}
const mapDispatchToProps ={
  addSubscriber,
  removeSubscriber
}
export default connect(mapStateToProps,mapDispatchToProps)(Subscribers)

• ‘react-redux’에서 connect를 불러와야 사용할 수 있습니다.
• export할 내용에 connect를 붙이고 connect(불러올 값들)(보낼값) 로 사용합니다.
• state를 props의 값으로 받아오겠다라는 mapStateToProps 라는 함수를 만듭니다. return 값으로 우리가 필요한 state의 내용들을 적으면 됩니다.
  
• 또한 함수를 불러올 때에도 Dispatch를 props의 값으로 받겠다라는 함수를 만들어 내용으로 사용할 함수들을 적습니다.
  
• 이 두 함수(actions , state 받아오기)를 connect 안에 적어주게 되면 props의 내용으로 위의 값들을 사용가능합니다.
  

두개 이상의 reducer

또 다른 reducer를 만들기 위해서 views 라는 새로운 폴더와 함께 똑같은 구조로 만들어 줍니다.

똑같이 만들어 주고 나서 store에 등록을 하려고 하는데 두개를 등록할 수가 없습니다.

그래서 모든 리듀서들을 합치는 파일을 만들어 주게 됩니다 →rootReducer.js

//rootReducer.js
import {combineReducers} from 'redux'

import subscribersReducer from './subscribers/reducer'
import viewReducer from './views/reducer'

const rootReducer = combineReducers({
  views: viewReducer,
  subscribers : subscribersReducer
})
export default rootReducer

rootReducer 에서는 ‘redux’에서 combineReducer를 불러오고 subscribersReducer , viewReducer rootReducer 라는 변수에 합쳐주게 됩니다.

→ viewReducer 와 subscribersReducer 이름을 바꿔줘도 좋습니다.

이제 이 값을 store.js 에서 받아서 createStore안의 값으로 rootReducer 을 넣어줍니다.

→ const store = createStore(rootReducer)

Reducer들의 이름이 바뀌었기 때문에 사용하려고 하는 곳에서 받아올 때 주의합니다. state안의 subscribers안의 count값을 가져와야합니다.

const mapStateToProps =(state)=>{
  return {count:state.subscribers.count}}

아래와 같이 변형도 가능합니다

const mapStateToProps = ({subscribers})=>{
  return {count: subscribers.count}}

actions 합치기

import {액션 함수들} from '../redux/~/actions' 로 들고 오려니깐 경로가 복잡합니다

그래서 이 actions를 한곳에 모아서 사용할 수 있습니다 .

//redux/index.js
export {addSubscriber,removeSubscriber} from './subscribers/actions'
export {addView,removeView} from './views/actions'

이 액션 함수들을 받자마자 바로 export 를 해버리게 한다면 쉽게 가져올 수 있습니다.

⇒ import {액션함수들} from ‘../redux’

actions에 동적인 데이터 넣기

input 창을 만들어 거기에 들어온 값을 제출해서 state를 변경 시키고 싶다면 어떤식으로 함수에 그 값을 넣어서 보내줄 수 있을까요?

• 원하는 값을 하나 만듭니다 const number = ? 그 값을 함수에 넣어서 redux로 보내는 법은 addView(number) 으로 가능합니다 . 대신 함수를 불러올 때 인자도 같이 입력해줘야 합니다.

  const mapDispatchToProps = {
    addView:(number)=>addView(number),
    removeView
  }

  이런식으로 number을 같이 보내줄 수 있고 이 값을 actions 에서 받는 법은 아래와 같습니다.

  //actions.js
  export const addView = (number) =>{
    if (!number){number=10}
    return {
      type:ADD_VIEW,
      payload: Number(number)}}

  우선 빈값이 들어오면 아무 숫자나 넣어줘서 NaN을 해결했습니다. 들어온 number는 number로 저장해도 되지만 react에서는 payload라는 값을 사용하기로 약속했습니다. payload에 저장된 값을 사용하는 법은 아래와 같습니다.

  const viewReducer = (state=initialState,action)=>{
    switch(action.type){
      case ADD_VIEW:
        return {
          ...state,
          count:state.count+action.payload} ...

  action에 저희가 저장한 type과 payload가 다 적혀있습니다.