Re-render React component on Redux state change

Question

I have create a very simple React/Redux application and I am struggling with getting a simple component to re-render when the state changes. I am using create-react-app as a starting point. In the video series I've been watching by Dan Abramov (https://egghead.io/lessons/react-redux-react-todo-list-example-adding-a-todo), he subscribes a root render function to the store, which gets called each time a change is dispatched. Without using Connect, I'd like to understand how to cause the Value component to re-render on state change.

Thanks!

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'
import { createStore } from 'redux'

const counter = (state = 0, action) => {
  console.log(action)
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

const store = createStore(counter)

ReactDOM.render(<App store={store} />, document.getElementById('root'))
registerServiceWorker()

app.js

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import Counter from './components/Counter'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Counter
          value={this.props.store.getState()}
          onIncrement={() =>
            this.props.store.dispatch({
              type: 'INCREMENT'
            })
          }
          onDecrement={() =>
            this.props.store.dispatch({
              type: 'DECREMENT'
            })
          }></Counter>
      </div>
    )
  }
}

export default App;

Counter.js

import React from 'react'
import Value from './Value'

const Counter = ({ value, onIncrement, onDecrement }) => {
  return (
    <div>
      <Value value={value}></Value>
      <button onClick={onIncrement}>+</button>
      <button onClick={onDecrement}>-</button>
    </div>
  )
}

export default Counter

Value.js

import React from 'react'

const Counter = ({ value }) => {
  return (
    <h1>{value}</h1>
  )
}

export default Counter

Rich Churcher Rich Churcher · Accepted Answer · 2017-12-05T00:29:53

Does this help clarify the process?

class App extends Component {
  constructor (props) {
    super(props)
    this.state = { counter: 0 }
    const { store } = props
    this.unsubscribe = store.subscribe(() => {
      const counter = store.getState()
      if (counter !== this.state.counter) {
        this.setState({ counter })
      }
    })
  }

  render () {
    return (
      <div className='App'>
        <Counter
          value={this.state.counter}
          onIncrement={() =>
            this.props.store.dispatch({
              type: 'INCREMENT'
            })
          }
          onDecrement={() =>
            this.props.store.dispatch({
              type: 'DECREMENT'
            })
          } />
      </div>
    )
  }
}

A few things to note:

This isn't a good solution for anything other than learning. react-redux does this in a much more maintainable and performant way.
Obviously, Redux state would normally be an object and not a single integer.
.subscribe is essentially just a way to set an event listener. When the state updates, any attached handlers will be called. What you do in your handler is pretty much up to you, although sensible precautions against unnecessary rendering would be pretty high on the list.

Re-render React component on Redux state change

2 Answers