[Redux] 리덕스란

https://ko.redux.js.org/introduction/getting-started/

Redux 시작하기 | Redux

 

Redux  : 전역상태를 관리하는 라이브러리

 

리덕스에서는 전역상태를 저장하고 있는 스토어가 있고, 컴포넌트에서는 스토어에서 필요한 state값을 구독해서 사용한다.

 

상태를 변경시켜야 할 때 어떻게 변경시킬지에 대한 정보를 담아서 액션이라는 객체를 만든다.

그리고 그 액션을 디스패치(처리될 작업을 실행시키는 것, 보내는 것)해서 리듀서(함수)에게 넘겨 준다.

리듀서는 액션의 정보를 보고 state를 정해진 규칙에 따라 변경한다. 

 

최종적으로 전역스테이트가 변경되고, 해당하는 스테이트를 구독하고 있던 컴포넌트는 변경된 새로운 state값을 받는다.

해당하는 컴포넌트는 "리랜더링"된다.

 

*(스토어는 무조건 하나, 관리하는 state는 여러개일 수 있다.)

 

리덕스의 3가지 원칙

1.single source of truth

신뢰가능한 단일 출처

데이터는 신뢰가능한 단일 출처를 가져야 한다.

데이터를 여러 곳에 두지 말고 하나의 스토어에 두고 관리한다.

=>중복 데이터 오류를 줄이고 디버깅을 쉽게 하기 위해서

 

2. state is read-only

상태는 읽기 전용

데이터의 흐름이 단방향이어야 한다.

액션이라는 객체를 통해서 데이터(state)가 변경되어야 한다.

=>이렇게 하면 데이터가 무엇에 의해 변경되었는지 명확하게 알 수 있다.

 

액션: 데이터 수정 요청서

3. changes are made with pure functions

리듀서는 순수 함수

상태를 변경하는 리듀서는 입력값이 있을 때(즉, 액션이 정해졌을 때) 랜덤하지 않은 일관된 결과를 리턴해야 한다.

 

• 순수함수 : 외부의 개입 없이 동일한 인풋값에 따라 항상 동일한 아웃풋을 반환하는 함수(입력값이 정해져 있을 때(액션이 정해졌을 때) 결과값을 예측할 수 있는 함수 / random이나 date함수는 그때마다 달라지기 때문에 아님X,리덕스에서 사용불가)
• 리듀서 : 이전 상태의 액션을 받아 다음 상태를 반환하는 순수 함수 이다. 이전 상태값을 변경하는 것이 아닌 새로운 상태값을 반환한다.

 

 

 

설치

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

Quick Start | Redux

 

1.터미널에 작성하여 설치한다.

npm install @reduxjs/toolkit react-redux

 

2. src 안의 파일의 js에 붙여넣는다. (ex: src폴더>store폴더>index.js 에 넣어줌)

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {}
})

 

3. src폴더 안의 index.js에 import 시켜주기

(store만 불러와도 위의 src폴더>store폴더>index.js 가 불러와짐)

+ Provider 도 import

import store from './store';
import {Provider} from 'react-redux';

 

4. 위의 코드 아래쪽에 store에 접근하여 사용하도록  Provider 컴포넌트를 설정한다.

<Provider store={store}>
  <App />
</Provider>

 

5. store폴더안에>counter를 폴더 생성> counterSlice.js 파일 생성

 

6. 사이트의 'Create a Redux State Slice'​ 를 참고하여 'counterSlice.js' 에 전체 복붙 후 수정하여 사용한다.

사이트 위 오리지널

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

 

수정한 'counterSlice.js' 내용

import { createSlice } from '@reduxjs/toolkit'
const initialState={
    value: 0
  }
  export const counterSlice = createSlice({
    name: 'counter',
    initialState,
    reducers: {
      increment: (state,action) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library(원래 깔아야하는데 톨킷은 이게 알아서 깔려있음. 그래서 알아서 ...state풀어서 한것처럼 적용되기 때문에 아래 바로state.value 이렇게 직접적용시킨것.),
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += action.payload; //state는 불변성 값이어야함
      action.type="SET_VALUE_INCREMENT" //type:어떤 리듀서에 가야하는지를 알려줌/필수
    },
    decrement: (state,action) => {
      state.value -= action.payload;
      action.type="SET_VALUE_DECREMENT"
    },
    //(state,action) 인자 2개 설정
    //state :현재 store의 값, value를 전달받아 변경되게 설정
    //action으로 넘어오는 데이터값을 전달받을 것임(액션데이터요청은 컴포넌트에서)

    //action.type:보통 대문자로 만듦.
  }
})

// Action creators are generated for each case reducer function
export const { increment, decrement } = counterSlice.actions

export default counterSlice.reducer

 *increment, decrement 는 미리 지정해 놓는 액션임. incrementByAmount는 불필요로 지움

   reducers: store의 데이터를 조작하는 것.  {}안에 어떤식으로 조작할지 내용을 작성

 

 

 

7. src폴더>component 폴더생성>Counter폴더생성>index.js파일 생성 후

아래 사이트에서 button부분을 index.js 에 복붙후 수정

위 사이트 오리지널

<div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
</div>

 

수정후) src폴더>component 폴더생성>Counter폴더생성>'index.js'에 작성

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {  decrement, increment  } from '../../store/counter/counterSlice';
// useSelector: store에서 구독해주는 역할을 함

const Counter  = () => {
    const dispatch = useDispatch() ; 
    const count=useSelector(state=>state.counter.value);
    //counter:index.js의  counter:counterSlice 이 값임
    return (
       <div>
        <button
            aria-label="Increment value"
            onClick={() => dispatch(increment(2))}//action.payload로 1 값이 전달됨
        >
          Increment
        </button>
        <span>{count}</span>
        <button
            aria-label="Decrement value"
            onClick={() => dispatch(decrement(1))}
            >
            Decrement
            </button>
        </div>
    );
};

export default Counter ;

 

App.js 작성

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

export default App;

 

8. 크롬에서 Redux DevTools 로 확인

+Redux DevTools 구글 사이트에 확장프로그램을 설치했음.

=> 원랜 터미널에 따로 설치해야하는데 톨킷은 알아서 설치돼서 위에 확장프로그램만 설치하면 크롬에서 확인가능)

 

리덕스 https://ko.redux.js.org/introduction/getting-started/ 전역상태를 관리하는 라이브러리   리덕스에는 전역상태를 저장하고있는 스토어가 있고   컴포넌트에서는 스토어에서 필요한 스테이트 값을 구독하여 사용한다.   상태를 변경 시켜야 할때   어떻게 변경 시킬지에 대한 정보를 담아서 액션이라는 객체를 만든다.   그리고 그 액션을 디스패치(처리될 작업을 실행시키는것 보낸는것 )  해서 리듀서에 넘겨 준다.   리듀서 액션의 정보를 보고 스테이트를 정해진 규칙에 따라 변경한다.   최종적으로 전역스테이트가 변경되고   해당하는 스테이트를 구독하고 있던 컴포넌트는 변경된 새로운 스테이트 값을 받는다.   해당하는 컴포넌트는 리랜더링 된다.  리덕스의 3가지 원칙   1. single source of truth  신뢰가능한 단일 출처  데이타는 신뢰 가능한 단일 출처를 가져야 한다.  데이터를 여러곳에 두지 말고 하나의 스토어에 두고 관리한다.  => 중복데이터 오류를 줄이고 디버깅을 쉽게 하기 위해서  2. state is read-only 상태는 읽기 전용 데이터의 흐름이 단방향이어야 한다  액션이라는 객체를 통해서 데이타(state)가 변경되야한다.  이렇게 하면 데이타가 무엇에 의해 변경 되었는지 명확하게 알 수 있다.  3. changes are made with pure functions  리듀서는 순수 함수  입력값이 정해져 있을때 결과값을 예측 할 수 있는 함수  상태를 변경하는 리듀서는  입력값이 있을때 (액션이 정해졌을때) 랜덤하지 않은 결과 일관된 결과를  리턴해야 한다.  ====================================== 액션 (Action) 상태에 변화(데이타의 변화)가 필요할 때 발생시키는 객체  액션 생성함수  (Action Creator) 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위해서 사용함  필수는 아니기 때문에  일일이 만들어서 써도 됨  리듀서 (Reducer) 상태변화를 일으키는 함수  현재의 상태와 액션을 참조하여 새로운 상태를 반환 스토어 (Store) 하나의 프로젝트에 하나의 스토어를 사용한다.  전역 state가 저장되어 있다.  디스패치 (dispatch) 액션을 리듀서에 집어넣는 행위 / 변화를 요청 하는 행위  useDispatch Hook 을 사용해서 디스패치 한다.  구독 (subscribe) useSelector Hook 을 사용하여 컴포넌트에서구독해 온다.