redux toolkit example (js version)

🍀 Install

npm install @reduxjs/toolkit react-redux

🍀 src/store.js

configureStore API로 Redux store(리덕스 저장소)를 생성한다.

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

🍀 src/index.js

React에서 Redux store를 사용하려면 react-redux의 로 감싸야 한다.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

🍀 src/counter/counterSlice.js

1. createSlice API로 Slice를 생성한다.
2. Slice가 생성되면 actions(상태 변환 함수)아 reducer를 내보낸다.

createSlice API

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

🍀 src/store.js

Slice reducer를 store에 추가하여 사용할 것이라는 것을 알림

counter는 서브 리듀서로 서브 리듀서를 모두 합한 리듀서를 만들 수 있다.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counter/counterSlice.js';
export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

🍀 src/couter/couter.js

리액트 컴포넌트에서 state와 actions 사용하기

Redux store와 상호 작용하기 위해 React-Redux hooks를 사용할 수 있다.

• useSelector: state 읽기
• useDispatch: action creator 가져오기

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { decrement, increment } from './counterSlice';

export default function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  );
}