React redux-thunk 구현 Blog만들기 총파일

reducers / PostsReducers.js

export default (state = [], action) => {

  switch (action.type) {

    case 'FETCH_POSTS' :

      console.log(action.payload)

      return action.payload;

    default:

      return state;

    }

};

 

reducers / usersReducers.js

export default (state = [], action) => {

switch (action.type) {

case 'FETCH_USERS' :

return [ ...state, action.payload] -- es6문법으로 해체

default: 할당이다

return state;

             //state[]에 action.payload를 추가하고 배열을 만든다

}

};

 

reducers / index.js

import { combineReducers } from 'redux';

import PostsReducers from './PostsReducers';

import usersReducers from './usersReducers';

 

export default combineReducers({

posts: PostsReducers,     // 두개의함수를 가지고와 리덕스를 활용하여 state로 저장한다

users: usersReducers      // 그렇게 combine된 함수들은 react-redux에서 connect해서 활용한다

});

 

 

index.js

import React from 'react';

import ReactDOM from 'react-dom';

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));

// createStore을 하면 store를 생성할 수 있으며 미들웨어인 thunk를 같이 인자값으로 생성하면

// 액션함수를 선언할 때 dispatch가 가능하여 자유롭게 리듀서의 정보를 액션에 맞게 변경할 수 있다

 

ReactDOM.render(           // Privider 컴포넌트에 store을 주면, 그 자식컴포넌트에서 store의 정보들을 편하게 사용이 가능하다

                                                // 이때 중요한 점은 applyMiddleware(thunk)도 같이 넣어주면서 store에 저장하게된다

<Provider store={store}>

<App />

</Provider>,

document.querySelector('#root')

);

// 이번 프로젝트는 redux-thunk를 활용하여 비동기식 처리 방법이다

// Thunk는 특정작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미합니다.

// 그리고 보통의 액션생성자는 그냥 하나의 액션객체를 생성할 뿐이지만 redux-thunk를 통해 만들게 되면 그 내부에서 여러가지 작업을 할 수도 있습니다

 

// 총정리

// react-redux의 Provider로 App를 묶어주면 App에 적용될 태그들은 store의 reducers 정보를 적용할 수 있다

// 적용하려고 하는 클래스를 connect함수로 연결하면 사용할 수 있다

 

// redux는 액션 함수들을 한 번에 묶어주어 리듀서를 만들어주어 관리해준다. 이때 redux의 combineReducers 함수를 사용하여야만 한다

 

Thunk와 Saga의 차이점

두 방식의 가장 큰 차이점을 문장 구조라고 생각을 할 것입니다. 그것이 가장 큰 사실이지만 더 큰 차이점이 존재하는데,

Thunks는 절대로 action에 응답을 줄 수 없습니다.

반면 Redux-Saga는 store를 구독하고 특정 작업이 디스패치 될 때 saga가 실행되도록 유발할 수 있습니다.

 

 

actions / index.js

import _ from 'lodash';

import jsonPlaceholder from '../apis/jsonPlaceholder'

 

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

await dispatch(fetchPosts());

 

// thunk의 장점중 하나는 dispatch를 함수로 할수 있다는 것이다 그렇게 전체적인 fetchPostsAndUsers 를 만들어서  호출하여 fetchPosts(), fetchUser(id) 두개를 dispatch하는 과정에서 데이터를 조작하여 id를 주입하게된다

 

// const userIds = _.uniq(_.map(getState().posts, 'userId'));

// userIds.forEach(id => dispatch(fetchUser(id)));

 

_.chain(getState().posts) // lodash의 chain()를 사용하면 가독성에도 좋다 한번 참조하자

.map('userId')

.uniq()

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

.value()

};

 

지금의 문제점은 userid의 중복된 호출이다

이것을 보다 성능을 향상시키기 위해 _.memozie()를 활용하는 것과 각종 중복배열을 제거하고

새로운 배열을 만들어 dispatch한다 위의 코드분석은 아래의 블로그를 참조하자

http://kbs0327.github.io/blog/technology/lodash/ , https://gracefullight.dev/2016/12/25/Lodash-활용법/

_.uniq() 배열의 중복제거,

_.map() 특정 값들의 제 배치,

forEach() 배열 나열

 

// export const fetchUser = id => dispatch => _fetchUser(id, dispatch);

// const _fetchUser = _.memoize(async (id, dispatch) => {

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

 

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

// });

 

그 변수는 매개변수로 지정된 함수와 같은 기능을 하는 동시에 이 함수는 메모리에 저장되어 동일한 인자값을 받을 때에는

네트워크에 거치지않고 자체적으로 메모리에 저장하여 request를 하지 않는다는 것이 장점이다

const getUser(int v){

return " hello world";

}

//const memoizedGetUser = _.memoize(getUser);

//memoizedGetUser(3)

//-> " hello world"

위의 예문처럼 최초 한번 네트워크에 요청하면 로그가 남는다. 하지만 그 다음에는 로그가 남지 않음을 알 수 있다

지금처럼 유저 정보가 반복될 때 네트워크에 요청하지 않고 재사용할 수 있다

 

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

console.log(dispatch) // api는 개별적으로 관리를 하고 그것을 접근하는 것은 비동기로 처리하는 것이 중요하다

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

// 그 이유는 JSX문법으로 태그를 넘겨받고 움직이는 컴퓨터의 실행력과 서버에서

// 데이터를 받아오는 시간차가 있기때문에 동기식으로는 절대 받아올 수 없다

 

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

// 그래서 비동기식인 async 와 await을 사용하여야 한다

// dispatch를 하려는 액션을 수동으로 불러낸다.

}; 즉, 액션을 직접적으로 돌려주는 것이 아니라 dispatch를 호출하여 액션 오브젝트를 건네어 주게 된다

 

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

// redux-thunk의 장점은 액션함수에서도 dispatch를 함수를 사용할 수 있다는 점이다

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

// 그렇게 axios로 비동기화 시켜 받아온 정보를 dispatch시켜 액션과 데이터를 건네줄수 있다

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

};

// 이 예제를 잘 이용하면 어떠한 정보를 CURD하여 그 정보를 액션 타입에 맞게 행동하는 코드를 작성하면 괜찮을 듯 하다

// 그리고 dispatc메서드에 매개변수를 지정하는데 이때 함수를 지정하여 다른 action 파일에 있는 함수도 호출을 할 수 있게 된다

// https://velog.io/@dongwon2/Redux-Thunk-vs-Redux-Saga를-비교해-봅시다- 여기에 들어가면 상세정보를 얻을 수 있다

 

당연히 밑의 예제처럼 일반적인 action 함수도 사용이가능하다

export const selectPost =()=> {

return {

type: 'SELECT_POST' // 하지만 서버에서 DATA를 가져올때에는 비동기식으로 가져올 것을 생각해야만한다

}

})

 

apis / jsonPlaceholder.js

import axios from 'axios';

 

export default axios.create({

baseURL: 'https://jsonplaceholder.typicode.com'

});              // 단지 api를 보관하기위한 파일여러개의 export해서 사용이가능할 것이다

 

 

 

 

 

components / PostList.js

import React from 'react';

import { connect } from 'react-redux'; // react에서 리덕스로 combined된 state를 사용하기 위해서는 react-redux가 필요하고

// connect 메소드라는 함수로 연결을 해주어야한다

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

import UserHeader from './UserHeader';

 

 

class PostList extends React.Component {

componentDidMount() {

this.props.fetchPostsAndUsers();

}

renderList(){

return this.props.posts.map(post => {

return (

<div className="item" key={post.id}>

<i className="large middle aligned icon user"></i>

<div className="content">

<div className="description">

<h2>{post.title}</h2>

<p>{post.body}</p>

</div>

<UserHeader userId={post.userId}/>

 

</div>

</div>

);

});

}

 

render() {

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

}

}

 

const mapStateToProps = (state) => {

return { posts : state.posts}

}

 

export default connect(        // 일반적으로 첫 번째 인자값에는 store의 state를 인수로 받습니다.

mapStateToProps,                  // store의 state는 props와 맵핑되는 방식을 만들 객체를 반환하는

                                                             mapStateToProps메서드를 사용한다

{ fetchPostsAndUsers } )(PostList); 

// 두 번째 인자값은 mapDispatchToProps는 dispatch action이 props와 맵핑되는 방식을 만들 유사한 객체를 반환한다

// fetchPostsAndUsers 로 정보를 받아와 componentDidMount에서 fetchPostsAndUsers ()를 실행시켜 액션을 취한다

//두 번째 괄호는 이 정보들을 사용할 클래스명을 쓴다

 

 

 

components / UserHeader.js

import React from 'react';

import { connect } from 'react-redux';

 

class UserHeader extends React.Component {

// componentDidMount() {                             // componentDidMount는 부모태그에서 넘겨주는 state만을 받아서 사용가능하다

// this.props.fetchUser(this.props.userId); // 그 이유는 componentDidMount는 랜더링이 끝나고 나서 처음 한번만 실행되기때문이다

// lodash추가로 DidMount 삭제 // 그래서 지금 한 번 실행될 때 fecthuser을 실행함으로써 액션을 실행하게 되고

그렇게 그 후 데이터를 불러온다

 

render() {

const { user } = this.props;

// const user = this.props.users.find(user => user.id ===this.props.userId);

     이렇게 장문으로 해서 비교해서 id를 찾는 방법이있지만

// 부모에서 받아온 props와 dispatch된 props가 혼동될수 있으니 확인하여야한다

if (!user) { // 그래서 밑에 처럼 connect후 mapstateToprops를 통해 기존 ownProps와 state를 구분해서 작업이 가능하다

return null;

}

 

return <div className="header">{user.name}</div>

}

}

 

const mapStateToProps = (state, ownProps) => {

return { user: state.users.find(user => user.id === ownProps.userId) }; // 참고합시다

}

 

export default connect(mapStateToProps)(UserHeader);

// mapstateProps와 그 fetchuser 함수를 연결함으로써 정보를 userHeader에서 사용이가능

 

 

 

components / App.js

import React from 'react';

import PostList from './PostList';

 

const App = () => { // App은 모든 컴포넌트를 받아 전달하는 의미가 있다

return (

<div className="ui container">

<PostList />

</div>

);

}

 

export default App;