내 구성 요소에게 내가 가게를 만들고 하위 구성 요소에 전달 최상위 구성 요소가

Question

, SubscriptionForm 다시 렌더링하지 않습니다 내 가게 업데이트 : 년

App.js

import React, { Component } from 'react'; 
import Navbar from './components/Navbar.js'; 
import SubscriptionForm from './components/SubscriptionForm.js'; 
import { createStore } from 'redux' 
import rootReducer from './reducers' 

const store = createStore(rootReducer) 

class App extends Component { 
    render() { 
    return (
     // Navbar 
     <div> 
     <Navbar/> 
     <SubscriptionForm store={store} /> 
     </div> 
    ); 
    } 
} 

export default App; 

을 내 SubscriptionForm 구성 요소, 양식을 렌더링합니다. 사용자가 양식을 제출하면 상점을 업데이트하기위한 작업을 전달합니다. 이것은 내가 붙어있는 곳입니다. 렌더링이 다시 호출되지 않습니다.

import React from 'react'; 

class SubscriptionForm extends React.Component { 
    constructor(){ 
    super(); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleSubmit(e) { 
    e.preventDefault(); 
    this.props.store.dispatch({type: 'SET_SUBSCRIBED'}) 
    //TODO: persist data to db 
    } 

    render() { 
    if(this.props.store.getState().subscription){ 
     return (
     <p>Hi</p> 
    ) 
    }else{ 
     return (
     <form onSubmit={this.handleSubmit} className='subscription-form'> 
      <input type='text' placeholder='email' /> 
      <input type="submit" name="commit" /> 
     </form> 
    ) 
    } 
    } 
} 

export default SubscriptionForm; 

감속기하는 index.js

import { combineReducers } from 'redux' 

const initialSubscription = { 
    subscribed: false 
} 

const subscription = (state = initialSubscription, action) => { 
    switch (action.type) { 
    case 'SET_SUBSCRIBED': 
     return true 
    default: 
     return state.subscribed 
    } 
} 

const rootReducer = combineReducers({ 
    subscription 
}) 

export default rootReducer 

구성 요소가 다시 쓰게하지 않습니다/때 구성 요소의 변경의 상태 나 소품? (여기서 내가 여기서 놀고 있니?)

Answer 1

수동으로 저장소에 액세스하려는 것 같습니다. 그렇게하지 마! React-Redux 패키지는 매장 등록 및 업데이트 프로세스를 처리하는 래퍼 구성 요소를 생성하는 connect 함수를 제공합니다.

Answer 2

저장소 작업을 보내지도 저장소 개체가 변경되지 않으므로 구성 요소 렌더링 새로 고침이 트리거되지 않습니다. 상점에 수동으로 액세스하는 경우 (대개 반응하는 학습 동안) 작업을 발송할 때마다 구성 요소를 다시 렌더링하는 트릭을 사용해야합니다.

ReactDom 렌더링 함수를 만들고 해당 렌더링 함수를 저장소에 구독합니다. 이제 저장소에서 작업을 전달할 때마다 구독 된 렌더링 함수가 호출됩니다.

하는 index.js

const render =() => 
    ReactDOM.render(
    <App store={store}/>, 
    document.getElementById('react-container') 
); 
store.subscribe(render); 
render();