feat: Channel Store 구현 (#176)

* feat: Channel Store Type 정의

* feat: Channel Store Action 정의

* feat: getChannels API 구현

- 초기 채널 정보를 받아오는 getChannels API 구현

* feat: Channel Store Reducer, Saga 정의

client/src/common/store/actions/channel-action.ts

@@ -0,0 +1,3 @@
+import { INIT_CHANNELS_ASYNC } from '../types/channel-types';
+
+export const initChannels = () => ({ type: INIT_CHANNELS_ASYNC });

client/src/common/store/reducers/channel-reducer.ts

@@ -0,0 +1,18 @@
+import { channelsState, ChannelTypes, INIT_CHANNELS } from '../types/channel-types';
+
+const initialState: channelsState = {
+  channelCount: 0,
+  channels: []
+};
+
+export default function channelReducer(state = initialState, action: ChannelTypes) {
+  switch (action.type) {
+    case INIT_CHANNELS:
+      return {
+        channelCount: action.payload.channelCount,
+        channels: action.payload.channels
+      };
+    default:
+      return state;
+  }
+}

client/src/common/store/reducers/index.ts

@@ -2,11 +2,13 @@ import { combineReducers } from 'redux';
 import userReducer from './user-reducer';
 import chatroomReducer from './chatroom-reducer';
 import modalReducer from './modal-reducer';
+import channelReducer from './channel-reducer';
 
 export const rootReducer = combineReducers({
   user: userReducer,
   chatroom: chatroomReducer,
-  modal: modalReducer
+  modal: modalReducer,
+  channel: channelReducer
 });
 
 export type RootState = ReturnType<typeof rootReducer>;

client/src/common/store/sagas/channel-saga.ts

@@ -0,0 +1,17 @@
+import { call, put, takeEvery } from 'redux-saga/effects';
+import API from '@utils/api';
+import { INIT_CHANNELS, INIT_CHANNELS_ASYNC } from '../types/channel-types';
+
+function* initChannelsSaga() {
+  try {
+    const channelCount = 0;
+    const channels = yield call(API.getChannels);
+    yield put({ type: INIT_CHANNELS, payload: { channelCount, channels } });
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+export function* channelSaga() {
+  yield takeEvery(INIT_CHANNELS_ASYNC, initChannelsSaga);
+}

client/src/common/store/sagas/index.ts

@@ -1,7 +1,8 @@
 import { all } from 'redux-saga/effects';
 import { chatroomSaga } from './chatroom-saga';
 import { userSaga } from './user-saga';
+import { channelSaga } from './channel-saga';
 
 export function* rootSaga() {
-  yield all([chatroomSaga(), userSaga()]);
+  yield all([chatroomSaga(), userSaga(), channelSaga()]);
 }

client/src/common/store/types/channel-types.ts

@@ -0,0 +1,23 @@
+export const INIT_CHANNELS = 'INIT_CHANNELS';
+export const INIT_CHANNELS_ASYNC = 'INIT_CHANNELS_ASYNC';
+
+export interface channelState {
+  channelId: number;
+  title: string;
+  description: string;
+  isPrivate: boolean;
+  members: number;
+  isJoined: boolean;
+}
+
+export interface channelsState {
+  channelCount: number;
+  channels: Array<channelState>;
+}
+
+interface InitChannelsAction {
+  type: typeof INIT_CHANNELS;
+  payload: channelsState;
+}
+
+export type ChannelTypes = InitChannelsAction;

client/src/common/utils/api.ts

@@ -67,5 +67,10 @@ export default {
     } catch (e) {
       throw new Error('Channel creation failed.');
     }
+  },
+
+  getChannels: async () => {
+    const response = await axios.get(`api/chatrooms`);
+    return response.data;
   }
 };