更新我的商店不会重新渲染我的组件

我有，我创建了商店，把它传递给它的子组件的顶级组件，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

更新我的商店不会重新渲染我的组件

回答

相关问题