React + Redux，状态变化时组件不更新

Question

大家好，我是 redux 的新手。我正在创建一个示例应用程序，如下所示：

入口点：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

问题是我的演示组件 Header 没有通过单击 LoginForm.js 中的按钮触发的操作 LOGIN 得到更新强>。

你能帮我找出我缺少的东西吗？这段代码有什么问题？

谢谢

Answer 1

我认为您尝试从错误的命名空间获取供应商 ID，并且您的 loginForm 的默认状态不好。试试这样：

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

还有连接

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