[Redux]리덕스

"Redux"는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다

음...

내가 이해하기로는 Redux는 결국

React에서 Model단의 역할을 하기 위해 생겨난 친구 같다.

React는 View 역할을 하고 있는데

React의 state는 결국 데이터고 변하고...

그런데 이 state를 주고 받을려면 

자식 컴포넌트에서 단계적으로 올라가야 하잖음.

 

 이는 데이터 하나만 전송하는데도

엄청나게 복잡해 질꺼임

그러므로 state(data)만 따로 관리해준다면

깔끔하게 정리할 수 있을꺼임

다음은 Redux가 사용하는 FLUX라는 디자인 패턴임

Action이 발생하면

Dispatch가 Store에 있는 state를 View단에 업데이트 해주는 식.

요런식이 됨.

<reducer/index.js>

import { combineReducers } from 'redux';

import BooksReducer from './reducer_books';

const rootReducer = combineReducers({

books : BooksReducer

});

export default rootReducer;

리듀서의 루트임

리덕스의

combineReducers를 이용하여

모든 리듀서를 하나로 만듬

<reducer/recuer_books.js>

export default function() {

return([

{title:"Javascript:Good"},

{title:"Python:Good"},

{title:"Ruby:Good"},

{title:"C++:Good"},

])

}

배열안에 객체형식으로 데이터들이 있음

이때 함수로 리턴되어야함!

결국 루트 리듀서는

books : [{title:"javascirpt:good"}...{}]

와 같이 배열로 가지게 됨

<container(component)/book-list.js>

import React, {Component} from 'react';

import { connect } from 'react-redux';

class BookList extends Component {

LoadBookList(){

return this.props.books.map(

(book,index) => {

return (<li key={index} className="list-group-item">

{book.title}

</li>)

});

}

render(){

return(

<ul className="list-group col-sm-4">

{this.LoadBookList()}

</ul>

)

}

}

function mapStateToProps(state){

return{

books : state.books

};

}

export default connect(mapStateToProps)(BookList)

자 일의 순서대로 살펴보자

import { connect } from 'react-redux';

1. react와 redux는 별개의 것이다. 그러므로 이를 연결할 연결고리로써 react-redux라이브러리를 사용한다

사용할 속성은 connect

function mapStateToProps(state){

return{

book : state.books

};

}

export default connect(mapStateToProps)(BookList)

2. 함수 이름 그대로 Props값을 State로 맵핑한다는 것임

여기서 받을 리턴 값은

book <- props값으로 정해질 값

state.books <- reducer에서 전달받을 값

그리고 connect를 이용하여 state를 연결!

LoadBookList(){

return this.props.book.map(

(book,index) => {

return (<li key={index} className="list-group-item">

{book.title}

</li>)

});

}

3. LoadBookList는

BookList의 속성인 book을 이제 받았으므로( 이때, 배열이고 그 안에 객체)

.map메소드를 이용하여 풀어나감!

이때 풀어나가는건

book의 타이틀속성

render(){

return(

<ul className="list-group col-sm-4">

{this.LoadBookList()}

</ul>

)

}

4.렌더링~