리액트 리덕스툴킷 사용법

리액트 리덕스툴킷 사용법

 

리덕스 툴킷 설치

npm install @reduxjs/toolkit react-redux

 

 

리덕스 툴킷 흐름

1.적용할 컴포넌트 만들기

2.슬라이스 

3.스토어

4.컴포넌트에 리덕스 적용하기

 

1.컴포넌트 

import React from 'react';


const Counter = () => {


  return (
    <div>
      <h1>Redux Toolkit Counter</h1>
      <div>
        <button onClick={}>Increment</button>
        <button onClick={}>Decrement</button>
        <button onClick={}>Increment by 5</button>
      </div>
      <p>Count: </p>
    </div>
  );
}


export default Counter;

 

2.슬라이스 만들기

슬라이스에서 액션함수와 리듀서 함수를 만들어 사용합니다.

import {createSlice} from '@reduxjs/toolkit'

//초기상태
const initialState ={
    number:0,
}

//슬라이스 만들기
const counterSlice= createSlice({
    //슬라이스의 이름
    name : 'counter',
    initialState,
    reducers:{
        increase:(state)=>{
            state.number+=1;
        },
        decrease:(state)=>{
            state.number-=1;
        },
        inputInint:(state,action)=>{
            state.number+=action.payload;
        }
    },
    
    

})

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

 

3.스토어 생성

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice"

const store = configureStore({
    reducer:{
        counter:counterReducer,

    }
})

export default store;

 

4.컴포넌트에 리덕스 적용하기

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import  store  from './slices/store'


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}> {/* store를 Provider로 감싸기 */}
    <App />
  </Provider>,
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

1번에서 만든 컴포넌트 리덕스 적용할수 있도록 수정

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {  increase, decrease, inputInint } from '../slices/counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.number); // Redux 상태 가져오기
  const dispatch = useDispatch(); // dispatch 함수 가져오기

  return (
    <div>
      <h1>Redux Toolkit Counter</h1>
      <div>
        <button onClick={() => dispatch(increase())}>Increment</button>
        <button onClick={() => dispatch(decrease())}>Decrement</button>
        <button onClick={() => dispatch(inputInint(5))}>Increment by 5</button>
      </div>
      <p>Count: {count}</p>
    </div>
  );
}


export default Counter;