javascript - Redux:渲染时 props 未定义

Question

尝试用我自己的例子来实现ReactRedux，我有点挣扎。看起来好像我的 props 没有被赋予任何值，并且在 React 渲染它们时仍然未定义。我的方法总体上是正确的，只是一个简单的错误，还是真的有问题？

我在 jsbin 中重新创建了我的问题:

class Walls extends React.Component {
    render() {
    return (
        <div id="main">
            <div>volume: {this.props.volume}m³</div>
        </div>
    )}
}

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

const WallContainer = connect(mapStateToProps)(Walls);

function reducer(state = Map(), action) {
  switch (action.type) {
  case 'SET_STATE':
    return state.merge(action.state);
  }
  return state;
} 

const store = createStore(reducer)
store.dispatch({
    type: 'SET_STATE',
    state: {"volume":1567.571734691151}
})

ReactDOM.render(
        <Provider store={store}>
            <WallContainer />
        </Provider>, 
        document.getElementById('root')
);

Answer 1

连接时，您只需从 Immutable Map 映射回来，否则您的方法对我来说看起来是正确的:

const mapStateToProps = (state) => {
    return {
        volume: state.get('volume')
    };
}

请记住，此时，state 仍然是一个 Immutable Map，而不仅仅是一个 JavaScript 对象。