Huy Huy - 1 month ago 17
React JSX Question

Updating my store does not re-render my component

I have a top-level component where I create the store and pass it to its child component,

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;


In my SubscriptionForm component, I render a form where if a user submits it, I dispatch an action to update the store. This is where I'm stuck - render does not get called again.

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;


reducers/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


Does the component not rerender when a state or prop of the component changes? (Where am I goofing up here?)

Answer

It looks like you're trying to access the store manually. Don't do that! The React-Redux package provides the connect function, which generates wrapper components that handle the store subscription and update process for you.