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

Checkout the Redux dev tools. It looks like perhaps your state tree is not in the state you expect. Perhaps supplierId should be connected from state.loginForm.supplierId. — Davin Tryon
– Davin Tryon, Commented Jun 2, 2016 at 16:27
@DavinTryon thanks a lot for your response, that was exactly the problem. but I don't really understand why the reducer name is coming to the state? — mahyar
– mahyar, Commented Jun 2, 2016 at 16:42
combineReducers({ loginForm }); expands to combineReducers({ loginForm: loginForm });. So, this is creating a key on the store named loginForm that all the reduced state from that reducer will be underneath. — Davin Tryon
– Davin Tryon, Commented Jun 2, 2016 at 16:44
Yes, it's important to know the keys of tour reducers have to match with the state keys — Michael Rasoahaingo
– Michael Rasoahaingo, Commented Jun 2, 2016 at 17:00

Michael Rasoahaingo · Accepted Answer · 2016-06-02 16:36:17Z

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
  }
}

answered Jun 2, 2016 at 16:36

Michael Rasoahaingo

1,0896 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Rasoahaingo Over a year ago

But you can improve your code by having a reducer for supplierId, and update your createStore to combine reducers of loginForm and supplierId

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related