Redux

React-Redux

Redux-React

React 애플리케이션에서 Redux를 사용하기 위해서는 react-redux 라이브러리가 일반적으로 사용된다. Provider 컴포넌트와 connect 함수는 React 컴포넌트를 Redux 스토어에 연결하는 데 사용된다.

폴더 구조

src
├─ actions
├─ components
├─ reducers
├─ store.js
└─ index.js
Store 생성과 Provider
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;
앱의 최상위 컴포넌트를 Provider로 감싸고, 스토어를 Provider의 props로 전달한다. 이렇게 하면 애플리케이션의 모든 컴포넌트에서 Redux Store에 접근할 수 있다.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './components/App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Connect 함수

리액트와 리덕스의 통합을 통해 애플리케이션 전반에서 일관된 데이터 흐름과 상태 관리를 달성할 수 있다. 이 과정에서 connect 함수는 매우 중요한 역할을 하며, 리액트 컴포넌트를 리덕스 스토어에 '연결'하여 상태를 props로 매핑하고 액션을 디스패치하는 인터페이스를 제공한다.

mapStateToProps

mapStateToProps 함수는 스토어의 상태를 컴포넌트의 props로 매핑한다. 이 함수는 스토어의 상태 전체 또는 일부를 선택하여 컴포넌트에 전달할 수 있게 해준다.
mapStateToProps 함수의 인자
  • 첫 번째 인자 state: store로부터 온 state
  • 두 번째 인자 ownProps(생략 가능): 컴포넌트가 가진 모든 props
function mapStateToProps(state) {
  return {
    state: state
  };
}

mapDispatchToProps

mapDispatchToProps 함수는 액션 크리에이터를 컴포넌트의 props로 매핑하여, 컴포넌트 내에서 dispatch를 호출하지 않고도 액션을 디스패치할 수 있게 해준다. 이는 로직을 더욱 명확하게 분리하고 테스트를 용이하게 한다.
mapDispatchToProps 함수의 인자
  • 첫 번째 인자 dispatch: Redux의 store.dispatch()와 같음
  • 두 번째 인자 ownProps(생략 가능): 컴포넌트가 가진 모든 props
const mapDispatchToProps = {
  addTodo,
  deleteTodo
};

컴포넌트와 스토어 연결

connect 함수를 사용하여 mapStateToProps와 mapDispatchToProps를 컴포넌트와 연결한다. 이렇게 함으로써 컴포넌트는 필요한 상태를 props로 받아올 수 있고, props를 통해 정의된 함수로 액션을 디스패치할 수 있다.
import { connect } from 'react-redux';

function TodoList({ todos, addTodo, deleteTodo }) {
  // 컴포넌트 로직
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList);
이 구조를 통해 리액트 컴포넌트가 Redux Store에 쉽게 연결되고, 일관된 상태 관리를 할 수 있다.