私のコンポーネントに私は、私が店を作成し、その子コンポーネントに渡しトップレベルのコンポーネントを持って

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コンポーネント、フォームをレンダリングします。ユーザーがフォームを送信すると、ストアを更新するアクションが送出されます。これは私が立ち往生している場所です - レンダリングは再び呼び出されません。 index.js

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; 

減速/

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();