React/Reduxはコンポーネントから状態を設定することができません

Question

私は自分の状態を設定するために以下に説明する単純なreact-reduxセットアップを持っています。しかし、私はいつも未定義になっています。

class DashBoard extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      value: 'b', 
      rooms: [] 
     }; 
    } 

    render() { 
     return (
     <div onClick={this.handleChange}>Click it</div> 
    ) 
    } 

    handleChange = (value) => { 
     this.setState({ 
     value: value, 
     }); 
     axios.get('http://localhost:3001/rooms'). 
     then((res) => { 
     this.props.setRooms(res.data.rooms); 
     console.log(this.props.rooms) 
     }). 
     catch((err) => { 
     console.log(err); 
     }) 
    }; 
} 

非常に単純なコンポーネントダッシュボードコンポーネント。今、私は私の派遣や輸出が私の部屋の減速がこの

import {SET_ROOMS} from '../actions/index'; 

function rooms_reducer(state = [], action) { 
    switch (action.type) { 
     case SET_ROOMS: 
      return action.rooms; 
     default: 
      return state; 
    } 
} 

export default rooms_reducer; 

のように見えますそして最後に、私のアクションは次のようになります。この

onst mapDispatchToProps = dispatch => { 
    return bindActionCreators({ setRooms }, dispatch); 
}; 

export default connect(null, mapDispatchToProps)(DashBoard); 

のように設定しています

export function setRooms(rooms) { 
    const action = { 
     type: SET_ROOMS, 
     rooms 
    } 
    return action; 
} 

現在、制御ログのthis.props.roomsがなぜ未定義に戻っているのかわかりません。少しの助けが本当に役に立ちます。おかげ

Answer 1

は、あなたの接続にmapStateToPropsを渡す必要があります。

const mapStateToProps = ({ rooms }) => ({ rooms }) 

const mapDispatchToProps = dispatch => { 
    return bindActionCreators({ setRooms }, dispatch); 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(DashBoard); 

あなたの状態で部屋を保存しているが、あなたが実際にコンポーネントに小道具としてそれをバック渡していない、とそうでないので、自動的に実行されます

Answer 2

Reduxストアの値は、コンポーネントに渡されていないため表示されません。この目的のためにmapStateToProps関数を使うべきです。また

const mapStateToProps = (state) => { 
    return { 
     rooms: state.rooms 
    } 
} 

export default connect(null, mapDispatchToProps)(DashBoard); 

ストアの更新は非同期動作であるため、あなたはすぐに行動