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

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

2 个答案: