Redux：渲染时道具未定义

Question

尝试用我自己的例子来实现 ReactRedux，我有点吃力。似乎我的道具没有被赋予任何价值，并且在 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 仍然是一个不可变的 Map，而不仅仅是一个 JavaScript 对象。

Redux：渲染时道具未定义

Redux: props are undefined when rendering

javascript

reactjs

redux