컨텐츠 내 위젯


Redux 및 Provider Consumer 패턴 메모 Angular / React

리듀서란 어플리케이션의 상태(저장소...라고해야 하나.. 원래는 스토어니까)를 반환하는 함수
액션은 스테이트를 변화시키는 함수
디스패치는 액션을 호출하는 함수

<react-redux>
커넥트는 컴포넌트와 디스패치를 연결하는 함수. 나머지는 금방 찾을 수 있지만 자주 헷갈리므로 메모..

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

const mapStateToProps = (state, ownProps) => ({
todo: state.todos[ownProps.id],
})

const mapStateToProps = (state) => ({ todos: state.todos })



<Provider Consumer 패턴>

-> Context :: 전파할 state 지정
-> Provider :: Context를 자신의 pops를 이용해 배포하는 컴포넌트
-> Consumer :: Provider를 구독하는 컴포넌트

// 기본값이 light인  ThemeContextconst ThemeContext = React.createContext('light');// 로그인한 유저 정보를 담는 UserContextconst UserContext = React.createContext({  name: 'Guest',});class App extends React.Component {  render() {    const {signedInUser, theme} = this.props;    // context 초기값을 제공하는 App 컴포넌트    return (      <ThemeContext.Provider value={theme}>        <UserContext.Provider value={signedInUser}>          <Layout />        </UserContext.Provider>      </ThemeContext.Provider>    );  }}function Layout() {  return (    <div>      <Sidebar />      <Content />    </div>  );}// 여러 context의 값을 받는 컴포넌트function Content() {  return (    <ThemeContext.Consumer>      {theme => (        <UserContext.Consumer>          {user => (            <ProfilePage user={user} theme={theme} />          )}        </UserContext.Consumer>      )}    </ThemeContext.Consumer>  );}


덧글

댓글 입력 영역