React Redux-存儲更新，重新渲染組件……但不包含新數據

Question

我有一個復雜的應用程序，但有一個問題，我已將其減少到以下3個文件。 本質上，正在發生的是：

• 組件加載並呈現初始文本
• 然后觸發一個欺騙API，該API調用this.props.route.onLoadData()
• 這反過來又調用了一個reducer，它返回一個包含更新文本的新對象。
• 組件會相應地重新渲染，但不會使用更新后的文本

我正在使用<Provider/>和connect() -均未成功。

有任何想法嗎？

---

index.js

---

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, hashHistory } from 'react-router'
import { createStore } from 'redux'
import { Provider } from 'react-redux'

import Reducers from './reducers'
import Problem from './Problem'

var store = createStore(Reducers)

var routes = [
  { path: '/problem',
    component: Problem,
    data: store.getState(),
    onLoadData: (res) => store.dispatch({ type: 'LOAD_DATA', data: res })
  }
]

var render = function() {
  return ReactDOM.render(
    <Provider store={store}>
      <Router history={hashHistory} routes={routes}/>
    </Provider>,
    document.getElementById('app')
  )
}

render()
store.subscribe(render)

---

problem.js

---

import React from 'react'
import { connect } from 'react-redux'

var ProblemContainer = React.createClass({

  spoofAPI() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ text: 'updated text' })
      }, 1000)
    })
  },

  componentDidMount() {

    this.spoofAPI().then((res) => {
      return this.props.route.onLoadData( res )
    }, console.error)

  },

  render() {

    var text = this.props.route.data.text

    console.log('render:', text)

    return (
      <div>{text}</div>
    )

  }

})

const mapState = state => ({ text: state })
export default connect(mapState)(ProblemContainer)

---

reducers.js

---

export default (state = { text: 'initial text' }, action) => {
  switch (action.type) {

    case 'LOAD_DATA':
      var newState = Object.assign({}, state)
      console.log('reducer - existing state: ', newState.text)
      newState.text = action.data.text
      console.log('reducer - receives: ', action.data.text)
      var returnObject = Object.assign({}, state, newState)
      console.log('reducer - returnObject: ', returnObject)
      return returnObject

    default:
      return state

  }
}

Answer 1

根據這兩段代碼：

var routes = [
  ... 
  data: initialState,
  ...
]

和

render() {
  var text = this.props.route.data.text
  ...
}

看來您正在執行的操作始終是在引用同一條數據（即initialState ）而沒有觸及存儲的情況。

UPDATE。 您要做的是通過react-redux連接Component以進行存儲，並在Component使用存儲值。

import React from 'react'
import { connect } from 'react-redux'
const Foo = React.createClass({
  ...
  render() {
    var text = this.props.text
    console.log('render:', text)
    return (
      <div>{text}</div>
    )
  }
})
const mapState = state => ({ text: state });
export default connect(mapState)(Foo);

Answer 2

添加一個可以從組件中調用的onGetState()可以正常工作……但這是一種反模式嗎？

index.js

var routes = [
  { ...
    onGetState: () => store.getState()
    ...
  }
]

problem.js

  render() {
    var { text } = this.props.route.onGetState()
    ...

  }