Container 도입 → 코드 개수가 많아짐

이러한 작업들을 자동화해주고 우리의 사고를 획기적으로 줄여주는 도구가 바로 React-Redux

→ npm install react-redux

🐌 connect & provider

connect로 기존에 container 사용했던 부분을 쉽게 리덕스와 연결 가능

import { connect } from ‘react-redux’;
export default connect() ( DisplayNumber ); 

→ connect()()를 실행하면 그 리턴값이 함수 → 그 리턴된 함수를 다시 실행, 반환 값을 export

store 공급을 위해 가장 상위 계층인 index.js에 가서 <App> 컴포넌트를 provider로 감싸줌

// react-redux 사용을 위한 provider 연결
import { Provider } from 'react-redux';
import store from './store';

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

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

🏂 Connect 함수의 인자

connect 함수의 첫 번째 인자 : mapStateToProps

→ 리덕스의 state를 리액트의 props로  연결시켜주는 역할

인자가 하나만 있다면 mapStateToProps로 사용됨 …

<DisplayNumber number={this.state.number}></DisplayNumber>
...
state = { number: store.getState().number } // store에서 number 가져오기
constructor(props) {
  super(props); // 반드시 먼저 실행 ! 
  store.subscribe(function() {
    this.setState({number: store.getState().number}); // 변경 시 render() 재 호출을 위한 subscribe
  }.bind(this));
}