React Redux - 存储更新，组件重新渲染.但不是新数据

Question

我有一个复杂的应用程序，我已将其减少到下面的 3 个文件。从本质上讲，正在发生的事情是：

• 组件加载并呈现初始文本
• 然后触发欺骗 API，该 API 调用this.props.route.onLoadData()
• 这反过来调用一个reducer，它返回一个包含更新文本的新对象
• 组件会相应地重新呈现，但不使用更新的文本

我正在使用<Provider/>和connect() - 两者都没有成功。

有什么想法吗？

---

索引.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)

---

问题.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)

---

减速器.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(，甚至没有触及存储。

更新。您要做的是通过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()可以...但这是一种反模式(？

索引.js

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

问题.js

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