reduxToolkit 사용

설치

npm install @reduxjs/toolkit react-redux

코드감싸주기

// index.js 또는 App.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import { store } from './app/store'; // 여기서 스토어를 import합니다.

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

스토어 생성: configureStore 함수를 사용하여 스토어를 생성합니다.

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

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

슬라이스 생성: 상태와 리듀서, 액션을 한 곳에서 관리하기 위해 createSlice를 사용합니다.

javascript
Copy code
import { createSlice } from '@reduxjs/toolkit';

const exampleSlice = createSlice({
name: 'example',
initialState: {
value: 0,
},
reducers: {
//여기서 리듀서스임
increment: state => {
state.value += 1;
},
decrement: state => {
state.value -= 1;
},
},
});

export const { increment, decrement } = exampleSlice.actions;
//액션들..
export default exampleSlice.reducer;

스토어에 슬라이스 연결: 슬라이스 리듀서를 스토어에 연결합니다.

import { configureStore } from '@reduxjs/toolkit';
import exampleReducer from './exampleSlice';
//이름 헷갈리지 않기 어떤리듀서를 갖고올지 슬라이스에서 만든 리듀서스 안에 있는것중
export const store = configureStore({
  reducer: {
    example: exampleReducer,
  },
});

리액트 컴포넌트에서 사용: useSelector와 useDispatch 훅을 사용하여 상태를 조회하고 액션을 디스패치합니다.

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

function ExampleComponent() {
  const value = useSelector((state) => state.example.value);
  const dispatch = useDispatch();

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