Redux-React의 기본

Redux-React는 상태관리를 하기위해 React에 Redux를 연결해주는 역할을 해준다.

• Provider

  Provider는 어렵게 생각할거 없이 단순한 하나의 컴포넌트이다. react로 작성된 컴포넌트들을 Provider안에 넣으면 하위 컴포넌트들이 Provider를 통해 redux store에 접근이 가능해진다.

Ex) Provider를 이용해 redux store에 연결하기

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import { App } from './App'
import createStore from './createReduxStore'

const store = createStore()

ReactDOM.render(
  // React의 props처럼 redux로 만든 store를 Provider에적용한다.
  <Provider store={store}>
  // 이제 App 컴포넌트는 Store에 접근이 가능하다.
    <App />
  </Provider>,
  document.getElementById('root')
)

• connect()

  connect함수는 Provider 컴포넌트 하위에 존재하는 컴포넌트들이
  Store에 접근하게 만드는 역할을 해준다.

import { connect } from 'react-redux'
import TodoApp from "./components/TodoApp"
 
 // connect 함수를 실행시키고 
 // TodoApp컴포넌트에서 store에 접근하게 만든다.
 const Todo = connect();
 export default Todo(TodoApp);
 
 // 위의 코드를 간단하게 만들면 아래와 같다.
 export default connect()(TodoApp);

1. mapStateToProps

mapStateToProps는 connect함수에 첫번째 인수로 들어가는 함수 혹은 객체다.
mapStateToProps는 기본적으로 store가 업데이트가 될때 마다 자동적으로 호출이 된다.이를 원하지 않는다면 null 혹은 undefined값을 제공해야한다.

Ex) mapStateToProps의 첫번째 인자.

// mapStateToProps는 기본적으로 state가 첫번째 인자로 사용된다.
// 그로인해 우리는 state를 다룰수 있게된다.
const mapStateToProps = state => ({ todos: state.todos })

Ex) mapStateToProps의 두번째 인자.

// mapStateToProps의 두번째 요소로는 우리가 원하는 객체를 인자로 넘겨주면된다.
state와 ownProps모두 순수 객체여야 한다.
const mapStateToProps = (state, ownProps) => ({
  todo: state.todos[ownProps.id]
})

Ex) mapStateToProps를 connect함수에 사용하기

import { connect } from 'react-redux'
import TodoApp from "./components/TodoApp"
 
 const mapStateToProps = (state, ownProps) => ({
  todo: state.todos[ownProps.id]
  })
 
 //connect 첫번째 인자로 mapStateToProps 함수를 제공했다.
 export default connect(mapStateToProps)(TodoApp);

2. mapDispatchToProps

mapDispatchToProps는 connect함수의 두번째 인자로 사용된다.
이것은 기본적으로 store에 접근한 컴포넌트가 store의 상태를 바꾸기 위해
dispatch를 사용할수 있게 만들어준다.

Ex) mapDispatchToProps의 dispatch

/* 
mapDispatchToProps는 첫번째 인자로
redux의 dispatch를 인자로 사용한다.
이를 통해 우리는 store의 상태를 변경할수있다.
*/
const mapDispatchToProps = dispatch => {
  // 순수 객체를 반환해줘야한다.
  return {
    // 순수 action객체를 dispatch 해준다.
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
    reset: () => dispatch({ type: 'RESET' })
  }
}

Ex) mapDispatchToProps로 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);

이렇게 우리는 스토어의 state에 접근이 가능하고 dispatch를 하는 방법을 알아보았다.