Redux状態がjavascriptオブジェクトで更新されていません

Question

私はこのコンテナとコンポーネント、およびオブジェクトをyeast私の店に入れようとしています。しかし、私はそれを試して保存するたびに動作しません。オブジェクトは、私は、コンソールか何かに誤りがないこの

{ yeastType : value, temp: value}

Container.js

const mapDispatchToProps = (dispatch) => { 
    return { 
     handleYeastChange: (yeast) => { 
      dispatch(actions.updateYeast(yeast)) 
     } 
    } 
}; 

const RecipeYeastContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(RecipeYeast); 

Component.js

updateYeastState = (updatedYeast) => { 
    this.props.handleYeastChange(updatedYeast) 
}; 

のように見えます。私のredux開発ツールを開くと、アクションが呼び出されるまでに状態が既に更新されていることがわかります。そして、私のフィールドに入力された最初の文字を保存するだけです。それはそれを永続させることはありません。その本当に奇妙な。また、UIに表示されることもありません。私は自分が望むだけ入力して、アクションの発射と最初の文字を保持している状態を見ることができますが、入力には表示されません。

私はyeastTypeとtempの両方をプロパティ関数に渡してそこにオブジェクトを構築するコードを変更すると、それはうまくいきます。

これは動作します（下記参照）：Container.js

const mapDispatchToProps = (dispatch) => { 
    return { 
     handleYeastChange: (yeastType, temp) => { 
      const yeast = {yeastType, temp} 
      dispatch(actions.updateYeast(yeast)) 
     } 
    } 
}; 

Component.jsなぜこれが起こっている私が把握することはできません

updateYeastState = (updatedYeast) => { 
    this.props.handleYeastChange(updatedYeast.yeastType, updatedYeast.temp) 
}; 

を。私はオブジェクトを完全に通過させ、再構成する必要がないと思った。

Answer 1

actionは正しく発送しますか？ reduxを使用しているときに、コンポーネントの状態を更新していない場合は、storeを更新してから、コンポーネント内の値はmapStateToProps関数のもので、storeから取得します。 storeをオブジェクトyourReducerという名前で更新しているとします。例：

Container.js：

const mapStateToProps = (state) => ({ 
    inputValue: state.yourReducer.value 
}) 
const mapDispatchToProps = (dispatch) => ({ 
    inputHandler: (e) => { 
    dispatch(yourAction({type: 'CHANGE_INPUT', value: e.target.value})) 
    // The store catches the action and pass to the reducer that can read the action's type 
    // in `yourReducer` will catch the 'CHANGE_INPUT' type and 
    // return a new value as same as the value that passed from the action 
    } 
}) 
export default connect(mapStateToProps)(Component) 

Component.js

export default class Component extends React.Component { 
    { your custom function here ... } 

    render() { 
    const { inputValue, inputHandler } = this.props 
    return (
     <div> 
     {/* The input will be the same as the inputValue changed */} 
     <input value={inputValue} onChange={inputHandler} /> 
     </div> 
    ) 
    } 
} 

reduxをデバッグするために、あなたがこのredux-devtoolを試すことができます。