[리액트 10] Redux

Redux Toolkit은 Redux를 좀 더 쉽고 효율적으로 사용할 수 있도록 도와주는 도구입니다. 기본 Redux에 비해 보일러플레이트 코드를 줄여주며, 여러 편리한 기능을 제공합니다. Redux Toolkit을 사용한 기본적인 Redux 설정과 사용법을 설명드리겠습니다.

1. Redux Toolkit 설치

Redux Toolkit과 React-Redux를 설치합니다.

npm install @reduxjs/toolkit react-redux

2. Store 생성

configureStore 함수를 사용해 Redux store를 생성합니다. 이 함수는 Redux DevTools와 미들웨어 등을 자동으로 설정해줍니다.

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {
    // 여기에 리듀서들을 추가합니다.
  },
});

3. Redux Slice 정의

Redux Toolkit은 createSlice 함수를 사용하여 reducer 로직과 actions를 한 곳에서 처리할 수 있게 해줍니다.

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  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;

4. Store에 Reducer 연결

생성한 slice의 reducer를 store에 연결합니다.

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

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

5. React 컴포넌트에서 사용

Provider 컴포넌트를 사용하여 store를 애플리케이션에 제공하고, useSelector와 useDispatch 훅을 사용하여 state를 읽고 actions를 dispatch합니다.

// src/App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './features/counter/counterSlice';

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

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(2))}>Increment by 2</button>
    </div>
  );
}

export default App;

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

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

Redux Toolkit을 사용하면 Redux의 복잡성을 크게 줄이고 코드를 더 간결하게 작성할 수 있습니다. 위 예제는 Redux Toolkit의 기본적인 사용법을 보여주며, 실제 애플리케이션에서는 이를 기반으로 더 복잡한 상태 관리 로직을 구현할 수 있습니다.

추가. 여러개 사용할 때(slice.js > store.js에서 한번에 걍 처리 / next의 경우 provider )

//store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const load = createSlice({
    name : 'loadstate',
    initialState : { value : false},
    reducers : {
        changeLoadState(state, action){
            state.value = action.payload;
        }
    }
});

const sid = createSlice({
    name : 'sid',
    initialState : { value : null },
    reducers : {
        setSid(state, action){
            state.value = action.payload;
        }
    }
});

export const { changeLoadState } = load.actions;
export const { setSid } = sid.actions;

export const store = configureStore({
    reducer: { 
        load : load.reducer,
        tagSid : sid.reducer,
    }
}) 

// provider.js
// next 에서는 use client 
"use client";
import { store } from "./store";
import { Provider } from "react-redux";

export default function Providers({ children }) {
    return <Provider store={store}>{children}</Provider>;
}