React-Redux#2

kingyong9169·2021년 5월 15일
0

React.js

목록 보기
6/7
post-thumbnail

React-Redux를 사용하는 이유

containers도 만들어서 컴포넌트를 감싸는 컴포넌트를 만드는 작업이 번거롭고 시간이 걸린다. 또한, 중간에 container가 끼어들기 때문에 상위 컴포넌트에 있는 property를 또, 하위 컴포넌트로 전달해야 하는 일이 생긴다. 이를 해결하기 위해 React-Redux가 만들어졌다.

npm install react-redux

index.js

import { Provider } from 'react-redux'
import store from './store'

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

위와 같이 Provider 컴포넌트를 App상위에 감싸주고 store를 import하면 Provider 하위 컴포넌트들은 import store를 하지 않고도 store를 사용할 수 있다.

DisplayNumber, AddNumber(containers)

export default connect(mapReduxStateToReactProps, null((DisplayNumber);
export default connect(null, mapReduxDispatchToReactProps)(AddNumber);

connect를 실행하고 실행해서 나온 결과를 또 실행한다. 왜냐하면 return이 함수의 함수이기 때문이다. wrap할 DisplayNumber를 전달하면 이 컴포넌트를 wrap하고 return한다.

첫 번째 인자의 첫 번째 함수(mapReduxStateToReactProps)는 redux의 state가 변경될 때마다 호출한다(subscribe).
첫 번째 인자의 두 번째 함수(mapReduxDispatchToReactProps)는 redux의 state를 변경할 때마다 호출한다(dispatch).

DisplayNumber(containers)

function mapReduxStateToReactProps(state) {
    return {
        number: state.number
    }
}
export default connect(mapReduxStateToReactProps, null((DisplayNumber);

mapReduxStateReactprops함수는 subscribe 역할을 하고 파라미터 state는 store.getState()를 뜻하고 return은 맨 밑 코드의 return을 뜻하게 된다. 이 코드는

state = { number: store.getState().number }
store.subscribe(function (){
             this.setState({ number: store.getState().number });
         }.bind(this));
 return <DisplayNumber number={this.state.number}></DisplayNumber>

이 코드들과 정확히 일치한다.

AddNumber(containers)

function mapReduxDispatchToReactProps(dispatch) {
    return {
        onClick: function (size) {
            dispatch({ type: 'INCREMENT', size: size });
        }
    };
}
export default connect(null, mapReduxDispatchToReactProps)(AddNumber);

파라미터 dispatch는 store.dispatch의 역할을 한다.

profile
Detail makes difference.

0개의 댓글