Redux-React는 상태관리를 하기위해 React에 Redux를 연결해주는 역할을 해준다.
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')
)
import { connect } from 'react-redux'
import TodoApp from "./components/TodoApp"
// connect 함수를 실행시키고
// TodoApp컴포넌트에서 store에 접근하게 만든다.
const Todo = connect();
export default Todo(TodoApp);
// 위의 코드를 간단하게 만들면 아래와 같다.
export default connect()(TodoApp);
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);
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를 하는 방법을 알아보았다.
export default connect(mapStateToProps, mapispatchToProps)(TodoApp);
mapispatchToProps 오타가 있어요