2017-05-23 7 views
-1

私は最近Reduxを使用しましたが、私はpropsのすべてのアップデートが毎回1ステップ遅れているようです。最初のdispatchconsole.logの後にはnullの値が返されますが、2回目のディスパッチ以来、前の値が返され、そのようになります。
私は間違いを犯しているのですか、Reduxのためですか?それが私でないなら、これを改善する方法はありますか?
更新Reduxの1ステップ遅れ

初期状態である、Reduxのはnullを返す言うために私のミス、それは実際には前のアクションの状態を返します。実行されたアクションの瞬間に状態を戻したいとしましょう。

import * as coord from "../actions/coordAction" 

function mapStateToProps(store){ 
    return{ 
     status: store.coord.status, 
     coord:store.coord.coord 
    } 
} 

class Form extends React.Component{ 
    constructor(){ 
     super(); 
     this.Submit=this.handleSubmit.bind(this); 
    } 
    handleSubmit(e){ 
     e.preventDefault(); 

     let coords=[]; 
     coords.push(this.refs.xCoord.value); 
     coords.push(this.refs.yCoord.value); 
     coords.push(this.refs.zCoord.value); 

     this.props.dispatch(coord.sendCoord(coords)); 
     console.log(this.props.coord); 
     fetch(/*something*/); 

    } 

    render(){ 
     return(
      <div> 
      <form className="coord_form" onSubmit={this.Submit}> 
       <input name="xCoord" type="number" ref="xCoord" defaultValue="31" placeholder="xCoord" min="0" max="250" required/> 
       <input name="yCoord" type="number" ref="yCoord" defaultValue="31" placeholder="yCoord" min="0" max="250" required/> 
       <input name="zCoord" type="number" ref="zCoord" defaultValue="31" placeholder="zCoord" min="0" max="250" required/> 
       <button type="submit">send coord</button> 
      </form> 
      </div> 
     ) 
    } 
} 
export default connect(mapStateToProps)(Form) 

store.js

import {applyMiddleware,createStore} from "redux" 

import thunk from "redux-thunk" 
import promise from "redux-promise-middleware" 

import coord from "./reducers" 

const middleware = applyMiddleware(promise(), thunk); 

export default createStore(coord, middleware); 


coordReducer.js

export default function reducer(state={ 
    status:null, 
    coord:[] 
},action){ 

    switch(action.type){ 
     case "GET_COORD":{ 
      return{ 
       ...state, 
       status: "get", 
       coord: [...state.coord,action.payload] 
      } 
     } 
     case "SEND_COORD":{ 
      return{ 
       ...state, 
       status: "send", 
       coord: [...state.coord,action.payload] 
      } 
     } 
    } 
    return state; 
} 
+1

標準的な動作ではないコードを投稿する必要があります – rpadovani

+0

@rpadovani申し訳ありませんが、私の間違い、私は私の質問を更新しました –

答えて

0

あなたはコンポーネント内からアクションをディスパッチすると、コンポーネントの小道具はすぐには更新されません。コンポーネントの更新はキューに入れられますが、Reactはまだ実際に更新を適用するチャンスを持っていません。したがって、すべての小道具は、発送前と同じままです。