[React-Redux] mapDispatchProps

본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다.

 

mapDispatchProps

connect 함수는 component와 store를 연결시켜주는 함수이다.

connect는 둘 중 하나의 arguments를 가질 수 있다.

 

• state
• dispatch

이번에는 dispatch를 살펴보자.

 

...
function mapDispatchToProps(dispatch) {
  console.log(dispatch);
}

export default connect(null, mapDispatchToProps)(Home);

Home.js

 

connect를 통해 mapDispatchProps를 사용하려면 다음과 같이 작성해줄 수 있다.

여기서 반환되는 dispatch를 살펴보면 위와 같다.

 

import React, { useState } from "react";
import { connect } from "react-redux";
import { addToDo } from "../store";

function Home({ toDos, dispatch }) {
  const [text, setText] = useState("");

  function onChange(e) {
    setText(e.target.value);
  }

  function onSubmit(e) {
    e.preventDefault();
    console.log(text);
    dispatch(addToDo(text));
    setText("");
  }

  return (
    ...
  );
}

function mapStateToProps(state) {
  return { toDos: state };
}

function mapDispatchToProps(dispatch) {
  return { dispatch };
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

Home.js

 

mapDispatchProps 역시 Component의 props로 dispatch를 전달해준다.

props를 조금 수정해서 조금 더 나은 코드를 만들어보자.

 

import { createStore } from "redux";

const ADD = "ADD";
const DELETE = "DELETE";

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

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

const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [{ text: action.text, id: Date.now() }, ...state];
    case DELETE:
      return state.filter((toDo) => toDo.id !== action.id);
    default:
      return state;
  }
};

const store = createStore(reducer);

export const ActionCreators = {
  addToDo,
  deleteToDo,
};

export default store;

store.js

import React, { useState } from "react";
import { connect } from "react-redux";
import { ActionCreators } from "../store";

function Home({ toDos, addToDo }) {
  const [text, setText] = useState("");

  function onChange(e) {
    setText(e.target.value);
  }

  function onSubmit(e) {
    e.preventDefault();
    console.log(text);
    addToDo(text);
    setText("");
  }

  return (
    ...
  );
}

function mapStateToProps(state) {
  return { toDos: state };
}

function mapDispatchToProps(dispatch) {
  return {
    addToDo: (text) => dispatch(ActionCreators.addToDo(text)),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

Home.js

 

mapDispatchToProps에서 addToDo라는 함수를 props로 전달해주는 방식으로 코드를 개선했다.

Home의 addToDo를 보면 addToDo()로 함수로 쓰이는 것을 볼 수 있다.

이런 방식으로도 사용 가능.