React + Redux, component does not get update while the state is changing

Question

Hi All I am new to redux. I am creating a sample app as below:

entry point: index.js

import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import inboundApp from './reducers'
import App from './components/App'

let store = createStore(inboundApp)

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app')
)

/components/App.js

import React from 'react'
import HeaderContainer from '../containers/HeaderContainer'
import LoginForm from '../containers/LoginForm'

const App = () => (
  <div>
    <HeaderContainer />  
    <LoginForm />
  </div>
)

export default App

/containers/LoginForm.js

import React from 'react'
import { connect } from 'react-redux'
import { login } from '../actions'

let LoginForm = ({ dispatch }) => {
  let input

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(login(input.value))
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Login
        </button>
      </form>
    </div>
  )
}
LoginForm = connect()(LoginForm)

export default LoginForm

/actions/index.js

export const login = (supplierId) => {
  return {
    type: 'LOGIN',
    supplierId
  }
}

/containers/HeaderContainer.js

import { connect } from 'react-redux'
import Header from '../components/Header'

const mapStateToProps = (state) => {
  return {
    supplierId: state.supplierId 
  }
}

const HeaderContainer = connect(
  mapStateToProps,
  null
)(Header)

export default HeaderContainer

/components/Header.js

import React, { PropTypes } from 'react'

const Header = ({ supplierId}) => {

  return (
      <div>

      <span>Your Supplier ID: </span> {supplierId}
      </div>
  )
}

export default Header

/reducers/loginForm.js

const loginForm = (state = '', action) => {
  switch (action.type) {
    case 'LOGIN':
      return Object.assign({}, state, {
        supplierId: action.supplierId
      })
    default:
      return state;
  }
}

export default loginForm

/reducers/index.js

import { combineReducers } from 'redux'
import loginForm from './loginForm'

const inboundApp = combineReducers({
  loginForm
})

export default inboundApp

The problem is my presentation component Header does not get update by the action LOGIN which is firing by click on the button in the LoginForm.js .

would you please help me to find what am I missing? what's wrong with this code?

thanks

Answer 1

I think you try to get the supplierId, from the wrong namespace and your default state of loginForm is not good. Try like that:

const loginForm = (state = {supplierId: ''}, action) => {
  switch (action.type) {
    case 'LOGIN':
      return Object.assign({}, state, {
        supplierId: action.supplierId
      })
    default:
      return state;
  }
}

And the connect

const mapStateToProps = (state) => {
  return {
    supplierId: state.loginForm.supplierId
  }
}