Redux 라이브러리 이해하기 1 - LNSol Velog


Redux 라이브러리 이해하기 1에서 작성했던 index.js에는 slice, store, 등 하나의 파일 안에 모든 것이 합쳐져있다. 이것을 공식 문서에 나와있는 것처럼 분리해보자!!!

Slice

기존에는 counterSlice에 count와 toggle이 모두 있었는데, 이것도 counterSlice와 toggleSlice로 분리할 것이다.

CounterSlice

// slice/counter.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
	name: 'counter',
	initialState: { count: 0 },
	reducers: {
		increase: (state, action) => {
			state.count += action.payload;
		},
		decrease: (state) => {
			state.count -= 1;
		},
	},
});

export const { increase, decrease } = counterSlice.actions;
export default counterSlice.reducer;

ToggleSlice

// slice/toggle.js
import { createSlice } from '@reduxjs/toolkit'

const toggleSlice = createSlice({
	name: 'toggle',
	initialState: { active: false },
	reducers: {
		switchActive: (state) => {
			state.active = !state.active;
		},
	},
});

export const { switchActive } = toggleSlice.actions;
export default toggleSlice.reducer;

Store

// store/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../slice/counter.js';
import toggleReducer from '../slice/toggle.js';

const store = configureStore({
	reducer: {
		counter: counterReducer,
		toggle: toggleReducer,
	},
});

export default store;

index.js

import store from './store/store.js';
import { increase, decrease } from './slice/counter.js';
import { switchActive } from './slice/toggle.js';

/* DOM 가져오기 */
const divToggle = document.querySelector('.toggle');
const count = document.querySelector('h1');
const btnIncrease = document.querySelector('#increase');
const btnDecrease = document.querySelector('#decrease');

/* render 함수 */
const render = () => {
	const state = store.getState();

	state.toggle.active
		? divToggle.classList.add('active')
		: divToggle.classList.remove('active');

	count.innerText = state.counter.count;	
};
render();
store.subscribe(render);

/* 이벤트 리스너 등록 */
divToggle.onclick = () => store.dispatch(switchActive());
btnIncrease.onclick = () => store.dispatch(increase(10));
btnDecrease.onclick = () => store.dispatch(decrease());