CODEWITHSUNDEEP
javascriptnode.jsreactjsreduxreact-redux
mahyar
mahyar

Reputation: 363

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

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

Upvotes: 0

Views: 317

Answers (1)

Michael Rasoahaingo
Michael Rasoahaingo

Reputation: 1089

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

Upvotes: 1

Related Questions