리액트 기존 리덕스 사용방법

리액트 기존 리덕스(redux) 사용방법

전체 흐름

1. Actions: 상태 변화를 위한 액션 정의 (INCREMENT, DECREMENT).
2. Reducers: 액션을 처리하는 함수로, 상태(state)를 업데이트.
3. Store: 상태 관리 중심. Provider로 앱과 연결.
4. Components: store를 연결하여 랜더링 

구현방법

1. 액션 함수 정의

-액션은 객체 형태로 애플리케이션에서 어떤 동작이 발생했는지를 설명하는 함수

-type이라는 액션의 고유 식별자가 필수로 이었야 하면 상태 업데이트할 때 필요한 값을 포함할 수 있다.

//액션타입정의
const INCREASE = 'counter/+'
const DECREASE = 'counter/-'

// 액션 생성 함수 예시
export const increase=()=>({type:INCREASE})
export const decrease=()=>({type:DECREASE})

 

2. 초기값 설정 및 리듀서 (Reducer) 함수 정의

-상태를 변경하는 함수로 현재 상태와 액션을 받아 새로운 상태를 반환하는데 이용된다

기본적으로 구현하기 위해서는 switch를 사용한다

switch를 사용한 경우

//초기값설정
const initialState={
    number:0
}

//리듀서함수
 function counter(state=initialState,action) {
     switch(action.type){
         case INCREASE:
             return{
                number:state.number+1
             }
         case DECREASE:
             return{
                 number:state.number-1 
             }
         default:
             return state
     }
    
 }

 

redux-actions을 이용하면 코드를 좀 더 줄일 수 있다.

import { createAction,handleActions } from 'redux-actions'

//액션타입정의
const INCREASE = 'counter/+'
const DECREASE = 'counter/-'

//액션함수정의
export const increase=createAction(INCREASE)
export const decrease=createAction(DECREASE)

//초기값설정
const initialState={
    number:0
}

const counter=handleActions({
    [INCREASE] : (state,action)=>({number:state.number+1}),
    [DECREASE] : (state,action)=>({number:state.number-1})
},initialState,)

 

3. 루트 리듀서 설정(Root Reducer)

-리듀서를 여러 개 사용한 경우 combinReducers를 사용하여 하나로 합칠 수 있다.

-합처야 하는 이유는 스토어는 하나만 사용할 수 있기 때문이다.

import {combineReducers} from 'redux';
import counter from './counter';

const rootReducer=combineReducers({
    counter,
})
export default rootReducer

 

4. 스토어 생성

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

const store = createStore(rootReducer)


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
    <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();

createStore를 이용하여 스토어를 생성할 수 있고 아까 합치 리듀서를 넣어서 만들 수 있다.

Provider을 이용하여 적용할 수 있다.

 

5. 컴포넌트와 스토어 연결

useSelector, useDispatch를 이용하여 컴포넌트에 바로 연결가능하다

 

 

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increase, decrease } from '../modules/counter';

//useSelect useDispatch를 이용하여 바로작성성
const Counter = () => {
    const number=useSelector((state)=>state.counter.number)
    const dispatch=useDispatch();
    return (
        <div>
            <h1>{number}</h1>
            <div>
            <button onClick={() => dispatch(increase())}>+1</button>
            <button onClick={() => dispatch(decrease())}>-1</button>
            </div>
        </div>
    );
};

export default Counter;

 

이때 아래 코드는 우리고 리듀서 함수를 정의할 때 초기값도 함께 정의하였다

우린 그 초기값을 number이라는 이름을 받아올 것이다 이때 사용하는 게 useSelector이다

여기서 state.counter.number 이라는 값으로 받아오는 이유는 

const rootReducer=combineReducers({
    counter
})
export default rootReducer

여기서 counter 이기에 state.counter 이 되면 

초기값을 설정할 때 아래와 같이 설정하였기에 state.counter.number 이 된다.

//초기값설정
const initialState={
    number:0
}

 

6. 사용하고 싶은 위치에 리덕스와 연결된 컴포넌트 사용

import Counter from './components/Counter';
function App() {
  return (
    <div className="App">

      <Counter/>

    </div>
  );
}

export default App;