我应该如何使用React/redux在渲染方法中传递数据

Question

我正在尝试将以下react条形图调整为适合我的react/redux项目：http://codepen.io/clindsey/collab/RRZBQm/.大部分代码对我来说还可以，但我并不真正理解渲染部分：

setTimeout(() => {
  const data = {'alpha': 82, 'bravo': 20, 'charlie': 68};
  const size = [480, 320];
  const margins = [40, 40, 40, 40];
  ReactDOM.render(
    <BarChart {...{data, margins, size}} />
  , document.getElementById('js-app'));
}, 0);

为什么在本例中，ReactDOM.render函数中通过BarChart元素传递"const"？

当将其适应我的本地项目时，我的容器中有以下代码：

    const App = () => (
      <div>
        <Component1 />
        <Component2 />
        <BarChart />
      </div>
    );
    export default App;

然后我使用mapStateToProps函数传递const data、const size和const margins，如下所示：

const data = {'alpha': 82, 'bravo': 20, 'charlie': 68};
const size = [480, 320];
const margins = [40, 40, 40, 40];
     function mapStateToProps(state) {
        return {
            data: data,
            size: size,
            margins: margins,
                  };
                };

它运行得很好，但我真的不明白自己在做什么。不确定这是一个好的练习还是天堂的意义。

谢谢。

Answer 1

mapStateToProps的整个想法是将您的Redux存储链接到您的(在您的情况下(React组件。通常你会像这个一样使用它

function mapStateToProps(state){
    return {
        propertyOne: state.myPropertyOne, //state.myPropertyOne comes from your redux store, when you return this object, your component gets this object
        propertyTwo: state.myPropertyTwo
    };
}

您不必将const变量传递到函数中即可使其工作。如果它们在那个文件中，你可以直接使用它们。

看起来还不错https://jsfiddle.net/julianljk/qkjkqf6q/