React Redux - 更新を保存し、コンポーネントを再レンダリングしますが、新しいデータではありません。

Question

私は以下の3つのファイルに縮小した問題を抱えた複雑なアプリケーションを持っています。基本的に、何が起こっているです：

• コンポーネントをロードして、テキスト
• 初期パロディーAPIをレンダリングすることは、更新されたテキスト
を含む新しいオブジェクトを返します減速を呼び出す順番に this.props.route.onLoadData()
• これを呼び出すトリガーされます
• はコンポーネントではなく、私は<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

---

---

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

コードのこれら2枚によると：

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

と

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

それは見てあなたがやっていることは、店に触れることなく常に同じデータ（つまり、initialState）を参照しているようなものです。

UPDATE。あなたがしなければならないのは、Componentをreact-redux経由で保存し、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() 
    ... 
    } 
] 

問題.js

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

    }