私は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'
};
}
ため
添付再来の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
}
}
を使用して修正しました。 – prosti
還元剤の機能名は何ですか?あなたはそれを持っていません。 – prosti
私はデフォルトでエクスポートされる別のレデューサーファイルを持っています。 –