[Redux] Redux Toolkit(React) : 상태관리

Redux Toolkit 

Redux Toolkit은 Redux를 더 사용하기 쉽게 만들기 위해 Redux에서 공식 제공하는 개발도구

https://ko.redux.js.org/tutorials/quick-start/

설치

<새로 프로젝트를 시작하는 경우>
- 아래로 설치시 Redux-Toolkit 이 설치된 개발 환경이 만들어진다.
npx create-react-app 프로젝트명 --template redux

npx create-react-app 프로젝트명 --template redux

<이미 프로젝트를 진행 중에 리덕스를 추가하는 경우>
0. react, react-dom 설치 (사용하기 위한 설치)

npm i react react-dom

1. react-redux , reduxjs/toolkit 설치

npm i react-redux @reduxjs/toolkit

 

---

적용시키기

사용할 파일에서 작성

 

import 

import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';

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

//createSlice : 하나의 state

//configureStore : 작은 slice들을 모아 store로 만들때는 configureStore

 

1. 적용시키는 곳

<Provider store={store}></Provider>로 감싸서 store에 전달

 

2. action을 보내는 Counter 컴포넌트

useDispatch를 통해 actions 전달
- actionCreator 함수를 자동으로 만들어주기 때문에 
ex) dispatch(slice이름.actions.전달값(2)); 이런식으로 간단하게 표현가능 

 

3. createSlice 작성 (slice= state  / 하나의 작은 store를 만든다.)

 

4. configureStore 작성 (slice를 모아둔 store를 만든다.)

 

---

전체 코드

import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';

import { createSlice, configureStore } from '@reduxjs/toolkit';
//createSlice : 하나의 state
//configureStore : 작은 slice들을 모아 store로 만들때는 configureStore

const counterSlice = createSlice({
    name:'counterSlice', //name 지정
    initialState:{value:0}, //초기값
    reducers:{
        up:(state,action)=>{
            state.value = state.value + action.payload;
        }//action.type이 up일땐 이 함수가 실행
    }
});

const store = configureStore({
    reducer:{
        counter:counterSlice.reducer //counter(name) slice의 많은 reducers를 하나로 만들어준 것
    }
});



function Counter(){
    const dispatch=useDispatch();

    const count=useSelector(state=>{
        return state.counter.value
    });

    return <div>
        <button onClick={()=>{
            //dispatch({type:'counterSlice/up',step:2});  //type:createSlice-slice name/reducer, step은 payload와 같다.
            //위를 toolkit에선 더 간단하게 아래로 표현
            dispatch(counterSlice.actions.up(2)); //payload:2로 들어가서 적용하게 되는것
        }}>+</button>
        {count}
    </div>
};

export default function ReduxToolkit() {    
    return (
        <Provider store={store}>
            <h3>Redux - Toolkit 사용하기 과제</h3>
            <p>
               <Counter /> 
            </p>
        </Provider> //Provider로 감싸 store에 전달
    );
};

 

---

위 전체코드를 file별 구분한 코드

(ReduxToolkit.jsx / counterSlice.js / store.js)

 

---

counterSlice.js

import { createSlice } from '@reduxjs/toolkit';
//createSlice : 하나의 state

const counterSlice = createSlice({
  name: 'counterSlice', //name 지정
  initialState: { value: 0 }, //초기값
  reducers: {
    up: (state, action) => {
      state.value = state.value + action.payload;
    }, //action.type이 up일땐 이 함수가 실행
  },
});

export default counterSlice;   //export default counterSlice.reducer; <=이걸로 해주면 store에서 import가 쉬워 편함
export const { up } = counterSlice.actions;

 

store.js

import { configureStore } from '@reduxjs/toolkit';
//configureStore : 작은 slice들을 모아 store로 만들때는 configureStore

import counterSlice from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer, //counter(name) slice의 많은 reducers를 하나로 만들어준 것
  },
});

export default store;

 

ReduxToolkit.jsx

import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';

import store from '../store';
//store : createSlice, configureStore 작성한 것

import { up } from '../counterSlice';
//actions은 간단한게 좋아서 {}로 가져옴

function Counter(){
    const dispatch=useDispatch();

    const count=useSelector(state=>{
        return state.counter.value
    });

    return <div>
        <button onClick={()=>{
            //dispatch({type:'counterSlice/up',step:2});  //type:createSlice-slice name/reducer, step은 payload와 같다.
            //위를 toolkit에선 더 간단하게 아래로 표현
            //dispatch(counterSlice.actions.up(2)); //payload:2로 들어가서 적용하게 되는것
            dispatch(up(2)); //payload:2로 들어가서 적용하게 되는것
        }}>+</button>
        {count}
    </div>
};

export default function ReduxToolkit() {    
    return (
        <Provider store={store}>
            <h3>Redux - Toolkit 사용하기 과제</h3>
            <p>
               <Counter /> 
            </p>
        </Provider> //Provider로 감싸 store에 전달
    );
};

 

 

사이트

https://ko.redux.js.org/tutorials/quick-start/

Quick Start | Redux

https://www.youtube.com/watch?v=9wrHxqI6zuM 

생활코딩 영상 과제