2017-02-05 20 views
0

私はreduxストアを更新できません。このアクションは、chromeのreduxツールで見ることができますが、変更が反映されている新しいハンドラオブジェクトを返しますメインストアは変更されず、その結果、コンポーネントは更新された値を取得しません。 以下は私のコードのスニペットです。クロムディスパッチ後に還元状態を更新することができません

実店舗すべてのレデューサー使用してフォームをレンダリング

import DataReducer from './DataReducer'; 
import Handler from './ReducerHandler' 

const allReducers =Redux.combineReducers({ 
    appdata : DataReducer, 
    handler : Handler 
}); 


export default allReducers; 

を組み合わせる

export default function() { 
    return{ 
     flowType : 'IAU', 
     customerId : 'fasfa', 
     actNumber : 'asfas' 
     }; 
} 

enter image description here

ため

添付再来のJSツール。

import {setFlowType,setUserId,setServiceNumber} from './actions/Index'; 

let {createStore} = Redux 
let {connect, Provider} = ReactRedux 
const store = createStore(allReducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); 

     ........ 
     ........ 
     `ReactDOM.render(<Provider store={store}><UserInputForm/></Provider>,document.getElementById('UserInput'));` 

リデューサー

var initialState = { 
     customerId : 'blablabla', 
     actNumber : 'blabla' 
     }; 

export default function(data=initialState,action) { 
    switch(action.type) { 
     case 'ACCOUNT_NUMBER_CHANGED': 
      return Object.assign({},data,{actNumber : action.actNumber}); 
     case 'USERID_CHANGED': 
      return Object.assign({},data,{customerId : action.customerId}); 
    } 
} 

UserInputForm

var UserInputForm = React.createClass({ 
    render: function(){ 
    return (

    <div className="container-fluid"> 
    <div className="row"> 
    <div className="col-sm-3"></div> 
    <div className="col-sm-8"> 
    <div className="row"> 
    <div className="form-group"> 
           <div className="col-sm-4"> 
            <label htmlFor="UserId" >User Id</label> 
           </div> 
           <div className="col-sm-8"> 
            <input type="text" id="UserId" className="form-control" defaultValue={this.props.storeData.customerId} onChange={(event) => this.props.setUserId(event)}></input> 
           </div> 
          </div> 
         </div> 
<div className="row"> 
          <div className="form-group"> 
           <div className="col-sm-4"> 
            <label htmlFor='ServiceNumber'>serviceNumber</label> 
           </div> 
           <div className="col-sm-8"> 
            <input type="text" id="ServiceNumber" className="form-control" defaultValue={this.props.storeData.actNumber} onChange={(event) => this.props.setServiceNumber(event)}></input> 
           </div> 
          </div> 
         </div> 
<div className="col-sm-1"></div> 
        </div> 
       </div> 
      </div> 
      ); 
     } 
}); 

    function matchDispatchToProps(dispatch){ 
     return bindActionCreators({setUserId :setUserId , setServiceNumber:setServiceNumber}, dispatch); 
} 

export default connect(mapStateToProps,matchDispatchToProps)(UserInputForm); 

アクションクリエイターは

export const setUserId = function (event) { 
    return{ 
     type : types.USERID_CHANGED, 
     customerId : event.target.value 
    } 
} 

export const setServiceNumber = function (event) { 
    return{ 
     type : types.ACCOUNT_NUMBER_CHANGED, 
     actNumber : event.target.value 
    } 
} 
+0

を使用して修正しました。 – prosti

+0

還元剤の機能名は何ですか?あなたはそれを持っていません。 – prosti

+0

私はデフォルトでエクスポートされる別のレデューサーファイルを持っています。 –

答えて

0

あなたはmatchDispatchToProps代わりのmapDispatchToProps書かれています。また、あなたはこの問題は、によるものであった

var UserInputForm = React.createClass({ 
    render: function(){ 
    return (

    <div className="container-fluid"> 
    <div className="row"> 
    <div className="col-sm-3"></div> 
    <div className="col-sm-8"> 
    <div className="row"> 
    <div className="form-group"> 
           <div className="col-sm-4"> 
            <label htmlFor="UserId" >User Id</label> 
           </div> 
           <div className="col-sm-8"> 
            <input type="text" id="UserId" className="form-control" defaultValue={this.props.appData.customerId} onChange={(event) => this.props.setUserId(event)}></input> 
           </div> 
          </div> 
         </div> 
<div className="row"> 
          <div className="form-group"> 
           <div className="col-sm-4"> 
            <label htmlFor='ServiceNumber'>serviceNumber</label> 
           </div> 
           <div className="col-sm-8"> 
            <input type="text" id="ServiceNumber" className="form-control" defaultValue={this.props.appData.actNumber} onChange={(event) => this.props.setServiceNumber(event)}></input> 
           </div> 
          </div> 
         </div> 
<div className="col-sm-1"></div> 
        </div> 
       </div> 
      </div> 
      ); 
     } 
}); 

    function mapStateToProps(state) { 
    return { 
     appData: state.appData, 
     handlerData: state.handler 

     } 
    } 
    function mapDispatchToProps(dispatch){ 
     return bindActionCreators({setUserId :setUserId , setServiceNumber:setServiceNumber}, dispatch); 
} 

export default connect(mapStateToProps,mapDispatchToProps)(UserInputForm); 
+0

私は 'mapDispatchToProps'を使ってみましたが、' mapStateToProps'の定義はここのコードにありますが、動作しませんが、reduxデバッグツールでアクションコールを取得します。添付として。 –

+0

mapStateToProps関数を追加できますか? –

+0

はい私はmapStateToPropsに変更しました –

0

を、あなたが接続して使用しているmapStateToProps機能を定義してそれを行うと、あなたのコード内でmapStateToPropsから戻っ小道具に応じて変更を行い、それが動作するはずですしていません私はそれに店舗の2つのコピーを通過したように、2つの対処と減速ハンドラへの変更を更新し、他の成分はAPPDATA使用していたので、変更は反映されなかったがあったので

const allReducers =Redux.combineReducers({ 
    appdata : data, 
    handler : Handler 
}); 

、コードの減速ブロックを組み合わせます。メインストアが変更されずにレデューサーが正しく呼び出されない場合は、

const allReducers =Redux.combineReducers({ 
    appdata : Handler 
}); 
関連する問題