[Reduxtagram] - setting

wesbos의 무료로 공개된 자료 https://learnredux.com/ 을 학습하며 정리한 내용입니다.

reducer

reducer는 액션으로 인해 상태값이 어떻게 바뀔 것인지를 정의한다.
각각의 리듀서를 정의해보자. 우리가 정의할 리듀서 중 하나는 post이다. 사진을 업로드해 포스팅했을 때의 액션을 구현할 것이기 때문에 임시로 한 가지를 우선 정의해보자.

function posts(state = [], action) {
    console.log(state,action);
    return state;
}

export default posts;

우리는 여러가지의 리듀서를 만들어야 한다. 이렇게 작은 조각 리듀서들을 하나로 통합해 rootReducer를 만든다음 리덕스 스토어를 만드는데, rootReducer는 combineReducers라는 메서드를 사용해 조각 리듀서들을 묶어 만든다.

rootReducer

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

import posts from './posts';
import comments from './comments';

const rootReducer = combineReducers({posts, comments, routing: routerReducer});

export default rootReducer;

posts와 comments 기능 구현을 위한 리듀서들을 모두 만들었다면, 이들을 불러와 combineReducers에 인자로 전달해준다. combineReducers메서드는 이들을 묶어 rootReducer를 만들어준다.

routerReducer

react-router-redux에서 routerReducer를 import해왔다.

router를 redux와 함께 사용하기 위해서는 히스토리와 리듀서를 동기화 해주어야 하는데, 그 중 하나로 routerReducer를 함께 사용해주어야 하기 때문에 combineReducer로 rootReducer를 만들 때 함께 인자를 전달해준다.

store

import { createStore } from 'redux';
import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory } from 'react-router';

//import the root reducer
import rootReducer from './reducers/index';

import comments from './data/posts';
import posts from './data/posts';

// create an object for the default data
const defaultState = {
    posts,
    comments
}

const store = createStore(rootReducer, defaultState);

export const history = syncHistoryWithStore(browserHistory, store);

export default store;

routeReducer까지 포함해 각 조각리듀서들을 comobineReducer로 묶은 rootReducer와, 초기 상태값인 defaultStore를 인자로 전달해 createStore로 리덕스 스토어를 생성한다.

생성한 store와 router에서 전달해주었던 browserHistory를 묶어 syncHistoryWithStore로 store와 history를 연결해준다.

router

import { render } from 'react-dom';

// Import Components
import Main from './components/Main';
import Single from './components/Single';
import PhotoGrid from './components/PhotoGrid';

// import react router deps
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

const router = (
  <Router history={browserHistory}>
    <Route path="/" component={Main}>
      <IndexRoute component={PhotoGrid}></IndexRoute>
      <Route path="/view/:postId" component={Single}></Route>
    </Route>
  </Router>
)

render(router, document.getElementById('root'));

위에서 말한대로 router의 히스토리를 redux와 동기화해줄 차례다.
react-router 에서 browserHistory를 import해온다음, router에 history로 전달해주었다.

Route

Route 는 클라이언트상에서 페이지를 라우팅 할 주소를 정의해준다.

IndexRoute

router의 첫페이지를 정의해준다.

url값을 /로 지정한 Main화면이 가장 첫번째로 보여지는데, 이 안에서 컴포넌트를 변경한다면
가장 첫번째로 표시할 화면을 지정할 때 IndexRoute를 쓴다.
Main페이지 안에서 사진을 보여줄때 photogrid 컴포넌트를 기본으로 처음 보여주고, 특정 사진을 클릭했을 때는 single 컴포넌트로 변경해 보여줄 것이다.

browserHistory

browserHistory는 뒤로가기를 해도 페이지가 새로 리로딩되지 않고 필요한부분만 리렌더링하도록 만들어준다.Router에 전달해준다.

Provider: 리액트 프로젝트에 스토어 연동

리액트 프로젝트에 스토어를 연동할 때는 react-redux 라이브러리 안에 들어있는 Provider 컴포넌트를 사용한다.

import { Provider } from 'react-redux';
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Reference

• 학습 영상
  https://learnredux.com/
• redux와 router를 사용하기 위한 리듀서,히스토리 동기화
  https://jamiejang.blogspot.com/2018/01/react-router-redux.html
• IndexRoute, browserHistory
  https://velopert.com/1173