[코딩일기] Redux를 공부하면서

Redux

1. Redux는 전역 데이터를 효과적인 관리를 위한 라이브러리.

2. drilling, bubbling 없이 'store'라는 공간과 통신해서 state를 변경, 전달 한다.

3. '액션(Action)'* 정의 > 액션을 받아서 결과를 만드는 '리듀서(Reducer)'** > 리듀서를 합쳐서 'store' 만들기

(*리듀서를 합친다는 개념이 잘 이해되지 않음)

 

*액션(Action)은, 객체(Object)형태로 type이라는 key를 필수로 가지고 있어야 한다. type은 문자열이다.

액션 객체는 함수로 만든다. 해당 함수는 스토어(Store)에 전달해 상태 변경 용도로 사용된다.

function 액션생성자명 (...args) {return 액션};

 

**리듀서(Reducer)는, 액션을 받아서 그 결과를 만들어주는 함수이다. 새로운 state를 만들어낸다.

Pure Function. 항상 같은 input을 받으면 같은 값을 return 한다. 시간에 따라 달라지는 결과 값은 사용하면 안된다.

불변해야 한다. 원래 state와 변경된 state가 별도의 객체로 만들어져야 한다.

function 리듀서명 (previousState*, action**) {return newState***};

*previousState는 현재 state

**action은 받은 액션

***newState는 새로운/변경된 state

 

export const ADD_TODO = 'ADD_TODO';

export function addTodo (todo) {

  return {

    type : ADD_TODO, // 객체 타입의 값은 변수로 넣어준다.

    // todo: todo, => // key와 value가 같으면 축약해서 쓸 수 있음!

    todo, 

  };

};

[actions.js 코드]

 

import { ADD_TODO } from './actions';

 

const initialState = [];

export function todoApp (previousState = initialState, action) {

  // 최초일 때, 초기값을 성정해 주는 부분

  if(action.type === ADD_TODO) {

    return [...previousState, action.todo];

  }

  // 이런 코드를 작성하면 리덕스에서 바뀐걸 감지할 수 없음 => previousState.push();

  return previousState;

}

[reducers.js 코드]

 

import { createStore } from 'redux'; //store를 만들어주는 redux 함수 'createStore'

import {todoApp} from './reducers';

const store = createStore(todoApp);

//todoApp에서 설정한 초기값이 최초에는 들어간다. => []

//dispatch(), getState(), replaceReducer(), subscribe() 등의 함수가 들어있다.

export default store;

[store.js 코드]

 

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import store from './redux/store';

import { addTodo } from './redux/actions';

console.log(store.getState());

// store의 변경사항이 생기는걸 subscribe

// store 상태가 변경되면 내부 함수가 호출된다.

//store.subscribe 결과물이 unsubscribe라는 역할을 하는 함수를 리턴한다.*

const unsubscribe = store.subscribe(() => {

  console.log(store.getState());  

});

store.dispatch(addTodo('coding'));

store.dispatch(addTodo('reading'));

store.dispatch(addTodo('drawing'));

unsubscribe();

//subscribe 동작을 멈춘다. removeEventListener랑 비슷한 느낌!

store.dispatch(addTodo('coding'));

store.dispatch(addTodo('reading'));

store.dispatch(addTodo('drawing'));

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);

reportWebVitals();

[index.js 코드]

store.getState() : 현재 스토어의 state를 가져오는 함수

store.dispatch(액션) : 스토어 상태 변경 함수

store.replaceReducer(다른리듀서) : 다른 리듀서로 교체

store.subscribe 결과물이 unsubscribe라는 역할을 하는 함수를 리턴한다.* 어떻게 리턴 되는지 이해되지 않음.