🌰DotoriLog

🐀Redux - Part 2. React + Redux (4)

January 14, 2021

1. store.dispatch() 의 μ—­ν• 

μ €λ²ˆ ν¬μŠ€νŒ…μ— 바닐라JS μ—μ„œ store.getState() 의 역할을 μˆ˜ν–‰ν•˜κ²Œ ν•˜λŠ” mapStateToProps ν•¨μˆ˜λ₯Ό 톡해,

Home Component μ—μ„œ props 둜 state λ₯Ό λ°›μ•„μ˜€κ²Œ ν•˜λŠ” 기적을 λ³΄μ•˜λ‹€.

이제 μ–΄λ–»κ²Œ ν•˜λ©΄ component κ°€ dispatch λ™μž‘λ„ ν•  수 μžˆμ„μ§€ μ‚΄νŽ΄λ³΄μž.

2. mapDispatchToProps ν•¨μˆ˜ μ„ μ–Έν•˜κΈ°

Home.js μ»΄ν¬λ„ŒνŠΈμ— μ €λ²ˆ mapStateToProps λ₯Ό μ„ μ–Έν•˜λ“―μ΄ λ§Œλ“€μ–΄ μ£Όμ—ˆλ‹€.

const mapDispatchToProps = (dispatch, ownProps) => {
  console.log(dispatch)
}

아직 μ™„μ „νžˆ 객체λ₯Ό λ¦¬ν„΄ν•˜κ²Œ μ½”λ“œλ₯Ό λ‹€ μž‘μ„±ν•˜μ§€λŠ” μ•Šμ•˜μ§€λ§Œ 일단 μ΄λŒ€λ‘œ 두고,

mapDispatchToProps 이 아이도 λ§ˆμ°¬κ°€μ§€λ‘œ connect 의 second argument 에 λ“€μ–΄κ°„λ‹€.

export default connect(mapStateToProps, mapDispatchToProps)(Home)

// export default connect(null, mapDispatchToProps)(Home);
// mapStateToProps κ°€ ν•„μš” μ—†λ‹€λ©΄ μ΄λ ‡κ²Œ null 둜 μ£ΌλŠ” 것도 λœλ‹€κ³  ν•œλ‹€.

κ·Έλ ‡κ²Œ ν•΄μ„œ μ½˜μ†”.log 둜 확인해본 dispatch 의 λͺ¨μŠ΅μ€ μ•„λž˜μ™€ κ°™λ‹€.

Ζ’ dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error('Actions must be plain objects. ' + 'Use custom middleware for async actions.');
    }

    if (typeof action.type === 'unde…

3. mapDispatchToProps ν•¨μˆ˜μ—μ„œ dispatch λ₯Ό λ¦¬ν„΄ν•˜κ²Œ ν•˜κΈ°

const mapDispatchToProps = (dispatch, ownProps) => {
  return { dispatch }
}

이제 Home Component 의 props 둜 λΆˆλŸ¬μ™€μ„œ dispatch λ₯Ό ν•  수 있게 λœλ‹€.

import { addToDo } from '../store'

μ•‘μ…˜ 크리에이터 ν•¨μˆ˜μΈ addToDo λ₯Ό λΆˆλŸ¬μ™€μ„œ,

handleSubmit ν•¨μˆ˜μ— props 으둜 λ°›μ•„μ˜¨ dispatch λ₯Ό μ‹€ν–‰ν•œλ‹€.

const handleSubmit = event => {
  event.preventDefault()

  setText('')
  props.dispatch(addToDo(text))
}

μ΄λ ‡κ²Œ props 둜 λ°›μ•„μ™€μ„œ dispatch λ₯Ό 날리면? μž‘λ™μ΄ λœλ‹€, κ·ΈλŸ¬λ‚˜? μ΄λ ‡κ²Œ ν•˜λŠ” 것 λŒ€μ‹  μƒˆλ‘œμš΄ props 을 받아와 μ‚¬μš©ν•΄λ³΄μž.

μž‘λ™μ΄ 잘 λœλ‹€.

react redux 2

Home.js μ—μ„œ μ§μ ‘μ μœΌλ‘œ dispatch λ₯Ό μ²˜λ¦¬ν•˜μ§€ μ•Šκ²Œ λ§Œλ“€μ–΄ 보자. 일단 μ΄μœ λŠ” 찬찬히 생각해 보겠닀.

이제 mapDispatchToProps 둜 κ°€μ„œ μˆ˜μ •ν•΄ 보자.

4. store.js 의 Action Creator Function

μ•žμ— export λ₯Ό ν•΄μ œ ν–ˆλ‹€. Why? 이제 더 이상 Action Creator Function 을 직접 μ‚¬μš© ν•˜μ§€ μ•Šκ²Œ ν•œλ‹€.

const addToDo = text => {
  return {
    type: ADD,
    text,
  }
}

const deleteToDo = id => {
  return {
    type: DELETE,
    id,
  }
}

그리고 μ½”λ“œ ν•˜λ‹¨μ— μ•„λž˜μ™€ 같이 export λ₯Ό ν•œλ‹€.

export const actionCreators = {
  addToDo,
  deleteToDo,
}

이제 Home.js μ—μ„œ actionCreators λ₯Ό 뢈러 였게 ν•˜λ©΄ λœλ‹€.

// Home Component
import { actionCreators } from '../store'

5. mapDispatchToProps ν•¨μˆ˜μ—μ„œ addToDo λΌλŠ” function을 λ§Œλ“€μ–΄ λ¦¬ν„΄ν•˜κΈ°.

import { actionCreators } from "../store";

..... μ€‘λž΅ .....

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    addToDo: (text) => dispatch(actionCreators.addToDo(text)),
  };
};

addToDo λΌλŠ” function을 λ§Œλ“€μ—ˆλ‹€. μ–˜λŠ” text argument λ₯Ό ν•„μš”λ‘œ ν•˜κ³  이 ν•¨μˆ˜κ°€ μ‹€ν–‰λ˜λ©΄μ„œ dispatch λ₯Ό ν˜ΈμΆœν•œλ‹€.

즉 addToDo ν•¨μˆ˜λ₯Ό props 둜 λ³΄λ‚΄μ„œ Home Component μ—μ„œ props 둜 addToDo λ₯Ό λ°›μ•„μ™€μ„œ μ‚¬μš©ν•˜κΈ° 전에

console.log(props) 둜 확인해 보면?

{history: {…}, location: {…}, match: {…}, staticContext: undefined, toDos: Array(0), …}
addToDo: text => {…}
history: {length: 5, action: "POP", location: {…}, createHref: Ζ’, push: Ζ’, …}
location: {pathname: "/", search: "", hash: "", state: undefined}
match: {path: "/", url: "/", isExact: true, params: {…}}
staticContext: undefined
toDos: []
__proto__: Object

addToDo: text => {…} κ°€ ν¬ν•¨λ˜μ–΄ μžˆλ‹€!!!!!!!

6. handleSubmit μ—μ„œ addToDo ν•¨μˆ˜ μ‹€ν–‰ν•˜κΈ°

const handleSubmit = event => {
  event.preventDefault()

  props.addToDo(text) // μ„±κ³΅μ μœΌλ‘œ reducer μ—κ²Œ dispatch ν•˜κ³  μžˆλ‹€.

  setText('')
}

μ΅œμ’…μ μœΌλ‘œ 이제 λ‚΄ Home component λŠ” μ§μ ‘μ μœΌλ‘œ dispatch λ‚˜ action creators λ₯Ό μ²˜λ¦¬ν•  ν•„μš”κ°€ μ—†κ²Œ λœλ‹€.

dispatch λ₯Ό home component μ—μ„œ μ‚¬μš©ν•˜μ§€ μ•ŠλŠ”λ‹€.

ν•¨μˆ˜λ₯Ό λ§Œλ“€μ–΄μ„œ props 둜 μ „λ‹¬ν•˜κ²Œ ν•œλ‹€λŠ” 것이 μš”μ μΈ λ“― ν•˜λ‹€.

7. μ™„μ„± μ½”λ“œ

ν—‰ν—‰ λ¦¬λ•μŠ€ γ… γ…  μ–΄λ ΅λ‹€. ν•˜μ§€λ§Œ 계속 μ‹œλ„ν•΄ λ³΄λ‹ˆ λ­”κ°€ 더 νŽΈν•  κ±° κ°™λ‹€λŠ” λŠλ‚Œ? 은 μ˜¨λ‹€.

import React, { useState } from 'react'

import { connect } from 'react-redux'

import { actionCreators } from '../store' // ! μ–˜λ„ μž„ν¬νŠΈ 해와야 ν•œλ‹€.

// dispatch λ₯Ό home component μ—μ„œ μ‚¬μš©ν•˜μ§€ μ•ŠλŠ”λ‹€. ν•¨μˆ˜λ₯Ό λ§Œλ“€μ–΄μ„œ props 둜 μ „λ‹¬ν•˜κ²Œ ν•œλ‹€.
const Home = props => {
  console.log(props)

  const [text, setText] = useState('')

  const handleChange = event => {
    setText(event.target.value)
  }

  const handleSubmit = event => {
    event.preventDefault()
    props.addToDo(text) // μ„±κ³΅μ μœΌλ‘œ reducer μ—κ²Œ dispatch ν•˜κ³  μžˆλ‹€.

    setText('')
  }
  return (
    <>
      <h1>🐀Something To Do🐀</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={text} onChange={handleChange} />
        <button>Add</button>
      </form>
      <ul>{JSON.stringify(props.toDos)}</ul>
    </>
  )
}

// ! store.getState() 의 μ—­ν• , props 둜 state λ₯Ό λ°›μ•„μ˜€λŠ” μ‹ λ°•ν•¨μ΄λž€..
const mapStateToProps = (state, ownProps) => {
  return { toDos: state }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    addToDo: text => dispatch(actionCreators.addToDo(text)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)
Written by@[DotoriMook]
ν”„λ‘ νŠΈμ—”λ“œ μ£Όλ‹ˆμ–΄ 개발자 λ„ν† λ¦¬λ¬΅μ˜ 기술개발 λΈ”λ‘œκ·Έ μž…λ‹ˆλ‹€.

GitHubMediumTwitterFacebook