Single source of truth : Redux는 단방향 데이터 흐름을 따른다. 즉, 애플리케이션의 상태는 한 곳(store)에서 관리된다.
State is read-only : Redux는 읽기전용이다. 그래서 상태를 변경하려면 액션(Action)을 통해 상태 변경을 요청해야 한다. 그리고 상태 변경 요청에 대한 처리를 담당하는 리듀서(Reducer)가 상태를 변경하고, 변경된 상태를 다시 애플리케이션에 반영한다.
Changes are made with pure functions : 변경은 순수함수로만 가능하다. 상태가 예상 못하는 값으로 변경되는 일이 없도록 순수함수로 작성되어야하는 Reducer와 연결되는 원칙이다.
@HamidReza Alizadeh. 리덕스 없을때, 있을때 초록 컴포넌트의 바뀌는 방법
이러한 방식은 store에서 관리되기에 애플리케이션의 상태 변화를 추적하기 쉽고, 예측 가능한 코드를 작성할 수 있도록 한다. 또한, 여러 컴포넌트에서 코드의 중복을 줄이고, 유지보수성을 높일 수 있다.
Redux의 구조
(Redux에서 사용하는 Action, Dispatcher, Reducer 그리고 Store의 의미와 특징) 아래와 같은 구조를 가지고있다.
Action
애플리케이션에서 일어난 이벤트를 나타내는 일종의 객체
반드시 type 속성을 가지며, 상태 변경을 위한 데이터를 담을 수도 있음
액션은 상태를 변경하기 위한 유일한 방법으로, 상태 변경을 발생시키는 원인이 됨
Dispatcher
액션을 발생시키는 함수
store의 dispatch() 메소드를 사용하여 액션 객체를 전달하면, 해당 액션을 처리할 수 있는 reducer가 호출됨
Reducer
액션에 따라 상태를 변경하는 함수
이전 상태와 액션 객체를 인자로 받아 새로운 상태를 반환함
reducer는 이전 상태를 변경하지 않으며, 항상 새로운 상태 객체를 반환함
Store
전체 애플리케이션의 상태를 저장하는 객체
애플리케이션 상태를 변경하는 유일한 방법은 액션을 dispatch하는 것
store는 reducer를 통해 상태를 변경하고, 변경된 상태를 React 컴포넌트에 전달함
더하기, 빼기 버튼 기능 구현
React와 Redux를 사용하여 간단한 더하기, 빼기 버튼 기능을 구현하는 예시
1. 필요한 패키지 설치하기
npm install react redux react-redux
2. Redux store 생성하기
Redux store는 전체 애플리케이션의 상태를 담고 있는 객체다.
createStore 함수를 사용하여 store를 생성.
import { createStore } from 'redux';
const initialState = { count: 0 };
function counterReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
const store = createStore(counterReducer);
3. Redux store를 React 애플리케이션에 연결하기
React Redux를 사용하여 Redux store를 React 컴포넌트에 연결시킨다.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import counterReducer from './reducers/counterReducer';
import App from './App';
const store = createStore(counterReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
4. Redux 액션과 액션 생성자 만들기
Redux 액션은 상태 변화를 일으키기 위한 객체고 액션 생성자는 액션을 생성하는 함수다.