[초보자를 위한 리덕스 101] #3.2 mapStateToProps ~ #3.3 mapDispatchToProps

본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다.

 

 

#3.2 mapStateToProps

이제 우리는 redux state로부터 정보를 가지고올 수 있어야한다.store.getState()로 현재 상태를 가져왔었다.

bash라는 함수가 있는데 이 함수는 component를 store에 연결시킨다. 이 connect를 사용해보자.home.js에서

import { connect } from "react-redux";

를 추가한다. 그리고 todo를 추가하고 가져오기위해 밑부분에 다음 코드르 추가한다.

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

 export default connect(getCurrentState)(Home);

그리고 ul사이에 작동시키기 위해 <ul>부분을 작성한다.

	 <>
       <h1>To Do</h1>
       <form onSubmit={onSubmit}>
         <input type="text" value={text} onChange={onChange} />
         <button>Add</button>
       </form>
       <ul>{JSON.stringify(toDos)}</ul>
     </>

 

 

 

#3.3 mapDispatchToProps

mapDispatchToProps을 사용할 때 mapstate는 필요하고 dispatch는 필요한 경우 다음고 같이 작성한다.

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

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

이제 우리는 Home에서 dispatch를 할 수 있다.

function Home({ toDos, addToDo }) {

으로 바꾸어주자. 그리고 onSubmit을 다음과 같이 바꾸면

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

addToDo에는 택스트가 필요하기 때문에 위와 같이 바꾸었다.

이제 새로운 prop을 만들어보자.

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

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

그리고 store.js로 가서 export한것을 export하지 않도록 바꾼다.

export const addToDo = text => {


const addToDo = text => {

그리고 하단에 다음 코드를 추가한다.

export const actionCreators = {
    addToDo,
    deleteToDo
};