App.js 분석 | Class 컴포에서 Redux 사용법

---

 Connect, mapStateToProps, mapDispatchToProps 함수는 현재 useDispatch 함수로 간단하게 대체해서 사용할 수 있다. 하지만 이 함수들의 기능을 파악해야 useDispatch로 변경시킬 수 있기 때문에 이 3가지 함수와 인자들에 대해서 공부해보자.

thoughtbot.com/blog/using-redux-with-react-hooks : React Hooks와 useDispatch

---

*Connect( )

: Provider 컴포넌트의 하위 컴포넌트들이 Store에 접근하게 만드는 역할을 한다.

connect(mapStateToProps, mapDispatchToProps)(Provider 하위 Component)

 

1. mapStateToProps

: connect 함수의 1번째 인수

: Store가 업데이트될 때마다 자동으로 호출됨. 이를 원하지 않는다면 null 또는 undefined값을 제공해야 함.

 

≒ Hooks의 useSelector의 개념과 비슷하다.

 

1-1) mapStateToProps의 1번째 인자 : state

  ex) const mapStateToProps = state =>({ todos : state.todos })

 

1-2) mapStateToProps의 2번째 인자 : 우리가 원하는 객체(순수 객체)

  ex) const mapStateToProps = (state, ownProps) =>({ todos : state.todos[ownProps.id] })

 

 

 

※ store.getstate( ).불라  = store의 불라의 상태값 불러오기 = usestate

 

 

2. mapDispatchToProps

: connect 함수의 2번째 인수

: state 관리를 위해 store에 접근한 Component가 dispatch를 사용할 수 있게 해준다.

 

2-1) mapDispatchToProps의 1번째 인자 : dispatch

  ex) const mapDispatchToProps= dispatch=>{

         return{

            increment : ()=>dispatch({type:'INCREMENT'})

        }

    }

 

 

※ store.dispatch( ) = store의 상태 변경하기 = useDispatch

 

dispatch 하기

import toggleTodo from "./actions/toggleTodo"

const TodoApp = () => {
	const { toggleTodo, todo } = this.props;
	return (
    	<div>
        	//mapStateToProps로 반환한 todo에 접근할수있다.
        	{todo}
            //mapDispatchToProps가 반환한 toggleTodo를 사용해
            //button을 눌러 dispatch하게 만들어줄수있다.
            <button onClick={() => toggleTodo()} />
        <div>
    )
}

const mapStateToProps = (state, ownProps) => ({
  todo: state.todos[ownProps.id]
  })
  
const mapDispatchToProps = (dispatch) => {
  toggleTodo: action => dispatch(toggleTodo(action))
  }
  
 /*
 	반드시 connect로 mapStateToProps, mapDispatchToProps를 넘겨주어야
 	mapStateToProps와 mapDispatchToProps가 반환한 객체에 TodoApp컴포넌트가
 	this.props로 접근할수있다.
 */
export default connect(mapStateToProps, mapispatchToProps)(TodoApp);