Redux

1
{
2
  type: 'TOGGLE_VALUE'
3
}

1
{
2
  type: "ADD_TODO",
3
  data: {
4
    id: 0,
5
    text: "리덕스 배우기"
6
  }
7
}
8
{
9
  type: "CHANGE_INPUT",
10
  text: "안ㄴ"
11
}

1
function addTodo(data) {
2
  return {
3
    type: 'ADD_TODO',
4
    data,
5
  }
6
}
7

8
// 화살표 함수로도 만들 수 있습니다.
9
const changeInput = text => ({
10
  type: 'CHANGE_INPUT',
11
  text,
12
})

1
function reducer(state, action) {
2
  // 상태 업데이트 로직
3
  return alteredState
4
}

1
// index.js
2
import { createStore } from 'redux'
3

4
const lightDiv = document.getElementsByClassName('light')[0]
5
const switchButton = document.getElementById('switch-btn')
6

7
const counterHeadings = document.getElementsByTagName('h1')[0]
8
const plusButton = document.getElementById('plus-btn')
9
const minusButton = document.getElementById('minus-btn')

1
// index.js
2
// 생략
3

4
// **** 액션 타입 정의
5
const TOGGLE_SWITCH = 'TOGGLE_SWITCH'
6
const INCREMENT = 'INCREMENT'
7
const DECREMENT = 'DECREMENT'

1
// index.js
2
// 생략
3

4
// **** 액션 생성함수 정의
5
// 액션 생성 함수 : 액션 객체를 만드는 함수
6
// 액션 객체는 type 값을 필수
7
// 나머지 액션에서 참고하고 싶은 값들은 마음대로
8
const toggleSwitch = () => ({ type: TOGGLE_SWITCH })
9
const increment = diff => ({ type: INCREMENT, diff })
10
const decrement = () => ({ type: DECREMENT })

1
// index.js
2
// 생략
3

4
// **** 초깃값 설정
5
const initialState = {
6
  light: false,
7
  counter: 0,
8
}

1
// index.js
2
// 생략
3

4
// **** 리듀서 함수 정의
5
// 리듀서 : 변화를 일으키는 함수
6
function reducer(state = initialState, action) {
7
  switch (action.type) {
8
    case TOGGLE_SWITCH:
9
      return {
10
        ...state, // 기존의 값은 그대로 두면서 새로운 값을 덮어쓰는 방식(스프레드 연산자)
11
        light: !state.light, // light 값 반전시키기
12
      }
13
    case INCREMENT:
14
      return {
15
        ...state,
16
        counter: state.counter + action.diff,
17
      }
18
    case DECREMENT:
19
      return {
20
        ...state,
21
        counter: state.counter - 1,
22
      }
23
    default:
24
      // 지원하지 않는 액션의 경우 상태 유지
25
      return state
26
  }
27
}

1
// index.js
2
// 생략
3

4
// **** 스토어 만들기
5
// createStore 함수를 사용, 파라미터는 리듀서 함수를 전달
6
const store = createStore(reducer)

1
// index.js
2
// 생략
3

4
// **** render 함수 만들기
5
const render = () => {
6
  const state = store.getState() // 현재 상태를 가져옵니다.
7
  const { light, counter } = state // 편의상 비구조화 할당
8
  if (light) {
9
    lightDiv.style.background = 'green'
10
    switchButton.innerText = '끄기'
11
  } else {
12
    lightDiv.style.background = 'gray'
13
    switchButton.innerText = '켜기'
14
  }
15
  counterHeadings.innerText = counter
16
}
17

18
render()

1
// **** 예시임
2
const listener = () => console.log('업데이트 됐어요!')
3
const unsubscribe = store.subscribe(listener)
4
// 나중에 unsubscribe();

1
// index.js
2
// 생략
3

4
// **** 구독하기
5
store.subscribe(render)

1
// index.js
2
// 생략
3

4
// **** 이벤트 달아주기, 액션 발생 시키기
5
// 액션을 발생시키는것을 디스패치(dispatch) 라고 함
6
// 디스패치를 할 땐, 스토어의 내장함수 dispatch 를 사용
7
switchButton.onclick = () => {
8
  store.dispatch(toggleSwitch())
9
}
10

11
plusButton.onclick = () => {
12
  store.dispatch(increment(5))
13
}
14

15
minusButton.onclick = () => {
16
  store.dispatch(decrement())
17
}

1
npm install @reduxjs/toolkit react-redux

1
// app/store.js
2
import { configureStore } from '@reduxjs/toolkit'
3

4
export default configureStore({
5
  reducer: {},
6
})

1
// src/index.js
2
import React from 'react'
3
import ReactDOM from 'react-dom/client'
4
import './index.css'
5
import App from './App'
6
import { Provider } from 'react-redux' // 추가
7
import store from './app/store'
8

9
// Start the mocking conditionally.
10
if (process.env.NODE_ENV === 'development') {
11
  const { worker } = require('./mocks/browser')
12
  worker.start()
13
}
14

15
const root = ReactDOM.createRoot(document.getElementById('root'))
16
root.render(
17
  <React.StrictMode>
18
    {/* 추가 */}
19
    <Provider store={store}>
20
      <App />
21
    </Provider>
22
  </React.StrictMode>,
23
)

1
// features/counter/counterSlice.js
2
import { createSlice } from '@reduxjs/toolkit'
3

4
// 1. createSlice()로 state 만들기
5
export const counterSlice = createSlice({
6
  name: 'counter',
7
  initialState: {
8
    value: 0,
9
  },
10
  reducers: {
11
    // Redux Toolkit은 immer를 사용하여 "불변성"을 보장합니다.
12
    // 불변성을 보장하면 더 쉽게 예측 가능한 상태를 유지할 수 있습니다.
13
    increment: state => {
14
      state.value += 1
15
    },
16
    decrement: state => {
17
      state.value -= 1
18
    },
19
    incrementByAmount: (state, action) => {
20
      state.value += action.payload
21
    },
22
  },
23
})
24

25
// Action creators는 reducer 함수 별로 생성됩니다.
26
export const { increment, decrement, incrementByAmount } = counterSlice.actions
27

28
export default counterSlice.reducer

1
// app/store.js
2
import { configureStore } from '@reduxjs/toolkit'
3
import counterReducer from '../features/counter/counterSlice'
4

5
// 2. configureStore() 안에 등록
6
export default configureStore({
7
  reducer: {
8
    counter: counterReducer,
9
  },
10
})

1
import { useDispatch, useSelector } from 'react-redux'
2
import { decrement, increment, incrementByAmount } from './counterSlice'
3

4
export default function Counter() {
5
  const count = useSelector(state => state.counter.value)
6
  const dispatch = useDispatch()
7

8
  return (
9
    <div>
10
      <div>
11
        <button onClick={() => dispatch(increment())}>Increment</button>
12
        <span>{count}</span>
13
        <button onClick={() => dispatch(decrement())}>Decrement</button>
14
        <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
15
      </div>
16
    </div>
17
  )
18
}

1
import { useDispatch, useSelector } from 'react-redux'
2
import { decrement, increment, incrementByAmount } from '../features/counter/counterSlice'
3

4
export default function Counter2() {
5
  const count = useSelector(state => state.counter.value)
6
  const dispatch = useDispatch()
7

8
  return (
9
    <div>
10
      <div>
11
        <button onClick={() => dispatch(increment())}>Increment</button>
12
        <span>{count}</span>
13
        <button onClick={() => dispatch(decrement())}>Decrement</button>
14
        <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
15
      </div>
16
    </div>
17
  )
18
}

1
import './App.css'
2
import TestMocking from './components/TestMocking'
3
import Counter from './features/counter/Counter'
4
import Counter2 from './components/Counter2'
5

6
export default function App() {
7
  return (
8
    <div className="App">
9
      <TestMocking />
10
      <Counter />
11

12
      <Counter2 />
13
    </div>
14
  )
15
}