Huy Huy - 4 months ago 30
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,



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
<SubscriptionForm store={store} />

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 {
this.handleSubmit = this.handleSubmit.bind(this);

handleSubmit(e) {
e.preventDefault();{type: 'SET_SUBSCRIBED'})
//TODO: persist data to db

render() {
return (
return (
<form onSubmit={this.handleSubmit} className='subscription-form'>
<input type='text' placeholder='email' />
<input type="submit" name="commit" />

export default SubscriptionForm;


import { combineReducers } from 'redux'

const initialSubscription = {
subscribed: false

const subscription = (state = initialSubscription, action) => {
switch (action.type) {
return true
return state.subscribed

const rootReducer = combineReducers({

export default rootReducer

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


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.