TIL 8.17

■ Redux

리덕스는 가장 사용률이 높은 상태관리 라이브러리로써 리액트의 복잡한 컴포넌트 구조속에서 보다 간편하게 모든 컴포넌트들이 state 를 쉽게 공유할 수 있게 해주는 방식

Redux 키워드

Action

• state에 어떤 변화가 필요할 때 우린 액션이란 것을 발생시키며 이는 하나의 객체이다.

Action Creator

• Action이 동작에 대해 선언된 객체라면 Action Creator 는 이 Action 을 생성해 실제로 객체로 만들어주는 함수이다.

import { createStore } from 'redux';

Reducer

• 실행 된 Action등의 State에 변화를 일으키는 함수이다.

CombineReducer

많은 리듀서들을 합쳐서 하나의 reducer로 관리할 수 있게 한다.

import {combineReducers} from 'redux',
(...)
const todoApp = combineReducers({visibilityfilter, todos});

Store

• 앱의 전체 상태를 저장할 수 있는 저장소이다.

CreateStore

최상위의 index.js 파일 내에서 스토어를 만들어 줄 수 있다.

import {createStore} from 'redux';
import reducers from './modules';

//리듀서들을 store 안에 넣어서 서로 연결해준다.
const store = createStore(reducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
(...)
 //이후 render함수 아래에 전달해준다.
 <Provider store={store}>

getStore

스토의 내의 상태를 가져와준다.

console.log(store.getState());

dispatch

디스패치는 스토어의 내장 함수 중 하나로 리듀서에게 Action을 전달한다. dispatch 함수는 dispatch(action) 이런 식으로 Action 을 인자로 넘긴다.