귤귤의 대모험

redux-thunk는 기존 redux의 createStore에 applyMiddleware를 추가하여  action함수에서 dispatch를 하게 해 준다 

그 결과 밑에 로직처럼 axios를 사용하여 결과 값을 dispatch 한다

export const fetchPosts = () => async dispatch => {

  const response = await jsonPlaceholder.get('/posts');

  dispatch({ type: 'FETCH_POSTS', payload: response.data });

};

export const fetchUser = id => async dispatch => {

  const response = await jsonPlaceholder.get(`/users/${id}`);

  dispatch({ type: 'FETCH_USER', payload: response.data });

};

Provider의 property 값에 applyMiddleware 추가하여 선언한다

import { Provider } from 'react-redux';

import { createStore, applyMiddleware } from 'redux';

import thunk from 'redux-thunk';

import App from './components/App';

import reducers from './reducers';

const store = createStore(reducers, applyMiddleware(thunk));

ReactDOM.render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.querySelector('#root')

);

그 이외 연결 및 사용방법은 기존 redux활용과 같다

밑의 url을 참고하자

https://tantangerine.tistory.com/3

components/SongList.js

import React, { Component } from 'react';

import { connect } from 'react-redux';

import { selectSong } from '../actions';

class SongList extends Component {

  renderList() {

    return this.props.songs.map(song => {

      return (

        <div className="item" key={song.title}>

          <div className="right floated content">

            <button

              className="ui button primary"

              onClick={() => this.props.selectSong(song)}

            >                                                           // selectSong()은 mapDispatchToProps함수를 통해

                                                                              현 클래스의 property에 추가된다 

              Select

            </button>

          </div>

          <div className="content">{song.title}</div>

        </div>

      );

    });

  }

  render() {

    return <div className="ui divided list">{this.renderList()}</div>;

  }

}

const mapStateToProps = state => {

  return { songs: state.songs };

};

export default connect(

  mapStateToProps,

  { selectSong }

)(SongList);

actions/index.js

import _ from 'lodash';

import jsonPlaceholder from '../apis/jsonPlaceholder';

export const fetchPostsAndUsers = () => async (dispatch, getState) => {

  await dispatch(fetchPosts());

  _.chain(getState().posts)

    .map('userId')

    .uniq()

    .forEach(id => dispatch(fetchUser(id)))

    .value();

};

export const fetchPosts = () => async dispatch => {

  const response = await jsonPlaceholder.get('/posts');

  dispatch({ type: 'FETCH_POSTS', payload: response.data });

};

export const fetchUser = id => async dispatch => {

  const response = await jsonPlaceholder.get(`/users/${id}`);

  dispatch({ type: 'FETCH_USER', payload: response.data });

};

react와 redux를 연결하는 방법을 간략하게 알아보고 이때 사용되는 react-reudx와 reducer의 관계를 알아보자

* 일단 변수명은 지금 로직과 관련이 없다는 것만 알고 다양한 연결방법과 쓰임새만 알고 가자

reuducer는 combineReducers를 활용하여 redux를 생성하게 되고 reducer의 return 값들은 redux의 값으로 활용된다

reducer/index.js

import { combineReducers } from 'redux';

const songsReducer = () => {

  return [

    { title: 'No Scrubs', duration: '4:05' },

    { title: 'Macarena', duration: '2:30' },

    { title: 'All Star', duration: '3:15' },

    { title: 'I Want it That Way', duration: '1:45' }

  ];

};

• ===============================================================

const selectedSongReducer = (selectedSong = null, action) => {

  if (action.type === 'SONG_SELECTED') {

    return action.payload;

  }

  return selectedSong;

};

export default combineReducers({

  songs: songsReducer,

  selectedSong: selectedSongReducer

});

• ===============================================================

reducer와 redux를 선언이 끝나면 redux에 값을 치환하기 위해서는 action함수를 선언한다

그리고 사용될 클래스 내에서 react-redux로  mapDispatchToProps를 활용하여

action함수와 reducer 를 Dispatch한다 그렇게 되면 action함수의 return 값이 reducer의 매개변수로 치환되어

redux값이 생성된다

actions/index.js

export const selectSong = song => {

  return {

    type: 'SONG_SELECTED',

    payload: song

  };

};

• ===============================================================

redux를 사용하기 위해서는 react-redux 라이브러리를 사용하여 redux와 react를 연결해야 한다

는 state와 ownProps를 사용하여 비교 분석하여 값 치환이 가능하다

state는 action함수를 실행시켜 reducer와 바인딩된 값을 가지고 있으며 그것을 사용하기 위해서는

mapStateToProps함수를 사용하여 현재 클래스와 connect를 해주어야 한다

ownProps는 부모 클래스에서 상속받아온 Props값을 나타낸다

아래의 코드는 action함수가 실행되고 나서 다른 클래스에서 reducer의 return값을 사용할 때

mapStateToProps함수를 현재 클래스와 connect 하는 것만으로 사용할 수 있게 된다

mapStateToProps함수에서 user에 값을 치환하여 클래스 내부에서 props로 받아서 사용이 가능하다

selectSong은 mapDispatchToProps함수를 통해 ation함수를 현 클래스의 property에 추가되어

props로 받아서 사용할 수 있다

이때 부모 컴포넌트에게 받아온 props값과 redux의 state값이 동시 추가되는 것을 확인할 수 있다

components/UserHeader.js

import { connect } from 'react-redux';

class UserHeader extends React.Component{

  ... 이하생략 

소스가 궁금하다면 url 확인하자

https://tantangerine.tistory.com/5?category=379283

}

const mapStateToProps = (state, ownProps) => {  

  return { user: state.users.find(user => user.id === ownProps.userId) };

};

export default connect(mapStateToProps,{ selectSong })(UserHeader);

• ===============================================================

Provider로 App 컴포넌트를 감싸게 되면  App 컴포넌트는 물론 하위 컴포넌트까지

store에 저장된 값을 사용할 수 있다 이때 저장되는 값은 redux로 combineReducers함수를 사용한 값이 된다

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import { createStore } from 'redux';

import App from './components/App';

import reducers from './reducers';

ReactDOM.render(

  <Provider store={createStore(reducers)}> 

    <App/>

  </Provider>,

  document.querySelector('#root')

);

• ===============================================================