mapStateToProps와 mapDispatchToProps

먼저, 기본 셋팅을 해주면,

index.js에는

import React from "react";
import * as ReactDOM from 'react-dom/client';
import { Provider } from "react-redux";
import App from './components/App';
import store from './store';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <Provider store={store}>
        <React.StrictMode>
            <App />
        </React.StrictMode>
    </Provider>
);

위처럼 셋팅을 맞춰주고, Provider에 store를 연결해주고, App을 감싸준다.

App.js 에서

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from '../routes/Home';
import Detail from "../routes/Detail";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" exact element={<Home />}></Route>
        <Route path="/:id" element={<Detail />}></Route>
      </Routes>
    </BrowserRouter>
  );
  }

export default App;

이런 식으로, BrowserRouter과 Routes, Route로 routing을 해주고

 

store.js에

import { createStore } from "redux";

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

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

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

const reducer = (state = [], action) => {
    switch(action.type) {
        case ADD:
            return [...state, { text: action.text, id: Date.now()}];
        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;

이렇게 data를 적어준다. 여긴 저번과 같다.

 

이제 routes폴더에 있는 Home.js에 store에 있는 data를 가져다줘야 한다.

이 행위를 mapStateToProps라고 부른다.

이것도 함수이며, 두개의 파라미터를 갖는데, state와 ownProps를 가진다. 

이땐, connect()를 사용하며, connect()는 Home으로 보내는 props에 추가될 수 있도록 허용해 준다.

수정할 수 있게끔하는건 mapDispatchToProps라고 하는데, dispatch와 ownProps파라미터를 가진다.

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

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

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

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

    return (
        <>
            <h1>To Do</h1>
            <form onSubmit={onSubmit}>
                <input type="text" value={text} onChange={onChange}/>
                <button>Add</button>
            </form>
            <ul>
                {toDos.map(toDo => (
                    <ToDo {...toDo} key={toDo.id}/>
                ))}
            </ul>
        </>
    )
}

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

function mapDispatchToProps(dispatch) {
    return {
        addToDo: (text) => dispatch(actionCreators.addToDo(text))
    }
}

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

이렇게 react-redux에서 connect를 import 해주고, mapStateToProps라는 함수를 만들어 toDos라는 이름으로 store에 있는 data를 가져오게 할 수 있다.  

그리고, mapDispatchToProps라는 함수를 만들어서 return에 addToDo라는 text를 인자로 받아 actionCreators라는 함수의 addToDo함수를 보내주고, submit함수에 넣어서, form이 전송되면,  addToDo가 실행되게 할 수 있다.