更新我的商店不會重新渲染我的組件

我有，我創建了商店，把它傳遞給它的子組件的頂級組件，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

是否部件不重新呈現時的成分的變化的狀態或道具？（我在哪裏去這裏？）

來源

2016-10-17 Huy

它看起來像你試圖手動訪問商店。不要這樣做！ React-Redux軟件包提供connect函數，該函數生成處理商店訂閱和更新過程的包裝器組件。

來源

2016-10-17 17:54:38 markerikson

真棒，謝謝。在實施它之前，我應該完成其餘的redux教程 – Huy

調度存儲操作不會更改存儲對象，因此不會觸發組件呈現刷新。如果您手動訪問商店（儘管最有可能學習反應），則無論您何時分派操作，都需要使用技巧來重新呈現組件。

創建ReactDom渲染函數並將該渲染函數訂閱到商店。現在，商店每次分派一個動作時，都會調用訂閱的渲染函數。

index.js

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

來源

2017-11-21 11:31:48

更新我的商店不會重新渲染我的組件

回答

相關問題