리듀서까지 만들었다면 이제 붙여서 확인해볼 수 있는 준비는 완료된 것입니다. 하나씩 해보도록 합시다 >_<

잠깐, next.js를 사용하신다면..

현재 next.js로 프로젝트를 만들면서 블로그 작성중이라 next.js에 대한 내용이 추가되네요.
이 시리즈에서 next.js를 사용하신다면 추가로 설치해야 할 게 있습니다.

npm i next-redux-wrapper // next에서 redux를 쓰기 위해 설치해야 하는 것.
npm i react-redux@next // hook 사용하기 위함

reducer 합치기.

보통 하나의 프로젝트에 하나의 스토어를 원칙으로 합니다. 복잡성을 줄이기 위해서겠지요.
따라서 우리가 각각의 기능별로 만들어 둔 리듀서를 하나의 스토어로 합치기 위해 rootReducer를 만듭니다.

reducers/index.js

import { combineReducers } from 'redux';
import user from './user';
import post from './post';

const rootReducer = combineReducers({
  user,
  post,
});

export default rootReducer;

스토어 만들기

1) react.js 버전

import { createStore } from 'redux';
import rootReducer from './reducers';

...

const devTools =
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
const store = createStore(rootReducer, devTools);

2) next.js 버전

import withRedux from 'next-redux-wrapper';
import { applyMiddleware, compose, createStore } from 'redux';
import rootReducer from '../reducers';

const ReactBird = () => {
  return (<div></div>);
}

export default withRedux((initialState, options) => {
  const middlewares = [];
  const enhancer = compose(
    applyMiddleware(...middlewares),
    !options.isServer && typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined' ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) => f,
  );
  const store = createStore(rootReducer, initialState, enhancer);
  return store;
})(ReactBird);

application에 연결

import { Provider } from 'react-redux';

const ReactBird = ({ store }) => {
  return (
    <Provider store={store}>
    	<div></div>
	</Provider>
);
}

view와 연결

hooks를 활용해서 붙입니다.

(1) store에서 가져오는 방법

useSelector의 인자 값으로 어떤 값을 가져올 지 정하면 쉽게 사용할 수 있습니다.

import { useSelector } from 'react-redux';

const Component = () => {
  const { user } = useSelector((state) => state.user);
  
  return (<div>user</div>);
};

(2) action 보내기

dispatch의 인자로 액션객체를 넣어주면 store가 새로운 state로 바뀌겠죠?

import { useDispatch } from 'react-redux';
import { loginAction } from '../../reducers/user';

const Component = () => {
  const dispatch = useDispatch();
  const onSubmitForm = useCallback((e) => {
    e.preventDefault();
    dispatch(loginAction({
      userId, password,
    }));
  }, [userId, password]);
  
  return (<div>user</div>);
};