Question

我有一个简单的react-redux设置，下面将描述我想要设置我的状态。但是我总是不确定。

DashBoard组件

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);
      })
    };
}

非常简单的组件。现在我的调度和出口设置如下

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

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

我的房间缩减器看起来像这样

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;

最后我的行动看起来像这样。

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

现在我似乎无法找到为什么控制日志中的this.props.rooms返回undefined。一点帮助真的很有帮助。谢谢

Answer 1

您无法看到Redux商店值，因为您尚未将其传递给组件。您应该使用mapStateToProps函数来实现此目的。

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

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

此外，由于更新商店是异步操作，因此您在调度操作后不会立即看到结果

Answer 2

您应该将mapStateToProps传递给您的连接：

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

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

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

因为您正在保存您所在州的房间，但实际上并没有将其作为道具传回组件，而且它不会自动发生

React / Redux无法从组件设置状态

2 个答案: