이 부분은 언제 봐도 새롭고 어려운 거 같다...
<리덕스 생애주기?>
자 만들어야 하는건
1. 클릭 했을 때 액션이 발동 하는 것(list의 온클릭)
2.온클릭된 list의 데이터를 다룰 reducer생성
3. reducer를 받아 view해줄 container
1-1. 액션을 추가
<action/index.js>
export function selectBook(Book){
return{
type : 'BOOK_SELECTED',
payload : Book
}
}
두가지를 리턴받고 첫번째는 타입 두번째는 payload
1-2. 기존의 book-list에 핸들러로 발동할 액션을 추가
<container/book-list.js>
import { bindActionCreators } from 'redux';
import {selectBook} from '../actions/index';
1-2-1. import로 redux의 { bindActionCreators }
그리고 액션 객체를 가져옴
function mapDispatchToProps(dispatch){
return (
bindActionCreators({
selectBook : selectBook
},dispatch)
)}
1-2-2. Action을 받고 state값을 줄 dispatch 함수 생성
bindActionCreators는
액션함수를 가져옴
이는 선택된 책을 타입과 payload를 리턴 할 수 있게 해줌
LoadBookList(){
return this.props.book.map(
(book,index) => {
return (
<li
key={index}
onClick={ () =>this.props.selectBook(book)}
className="list-group-item">
{book.title}
</li>
)});
1-2-3. onClick시 bindActionCreator로 속성이 된 selectBook함수를 불러옴
import React, {Component} from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {selectBook} from '../actions/index';
class BookList extends Component {
LoadBookList(){
return this.props.book.map(
(book,index) => {
return (
<li
key={index}
onClick={ () =>this.props.selectBook(book)}
className="list-group-item">
{book.title}
</li>
)
});
}
render(){
return(
<ul className="list-group col-sm-4">
{this.LoadBookList()}
</ul>
)
}
}
function mapStateToProps(state){
return{
book : state.note
};
}
function mapDispatchToProps(dispatch){
return (
bindActionCreators({
selectBook : selectBook
},dispatch)
)
}
export default connect(mapStateToProps,mapDispatchToProps)(BookList)
<booklist의 전체코드>
2-1. 액션시 전달할 리듀서 생성
<reducers/reducer_active_book.js>
export default function(state = null ,action){
switch (action.type){
case "BOOK_SELECTED" :
return action.payload;
}
return state
}
리듀서는 원래
두 가지 argument를 받음
첫번째로 state
두번째로 action
이 때 초기의 state는 아무것도 선택한된 null값이므로
es6문법적으로 저렇게 적음
그리고 action값이 무엇인가에 따라
return값이 다르기 때문에
switch문을 자주 사용하는편
2-2 index에 combineReducers
<reducers/index.js>
import { combineReducers } from 'redux';
import BooksReducer from './reducer_books';
import ActiveBook from './reducer_active_book'
const rootReducer = combineReducers({
note : BooksReducer,
activebook : ActiveBook
});
export default rootReducer;
3. reducer를 받아 view해줄 container생성
import React, {Component} from 'react';
import {connect} from 'react-redux';
class BookDetail extends Component {
render(){
if(!this.props.book_active){
return <div>Select a book</div>
}
return(
<div>
<h3>Detail: {this.props.book_active.title}</h3>
</div>
)
}
}
function mapStateToProps(state){
return {
book_active : state.activebook
};
}
export default connect(mapStateToProps)(BookDetail);
if문을 통해 초기값 null 시 리턴할 값
그리고 그 외의 리턴할 값
4. Review!
mapStateToProps를 통해
reducers에 있는 state들을 찾아 this의 Props로 전환
const rootReducer = combineReducers({
note : BooksReducer,
activebook : ActiveBook
});
reducer state에 존재하는 activebook과 매치!
ActiveBook은
export default function(state = null ,action){
switch (action.type){
case "BOOK_SELECTED" :
return action.payload;
}
return state
}
액션이 발생하면 액션을 찾아 그 액션에 부합하면 그 결과를 리턴!
onClick={ () =>this.props.selectBook(book)}
액션 발생!
파라미터는
export default function() {
return([
{title:"Javascript:Good"},
{title:"Python:Good"},
{title:"Ruby:Good"},
{title:"C++:Good"},
])
}
book의 리듀서 데이터!
액션!
export function selectBook(Book){
return{
type : 'BOOK_SELECTED',
payload : Book
}
}
선택된 책은 type =BOOK_SELECTED
payload(디테일한 내용) = 선택된 책의 객체
그리고
그 내용을 렌더링!
