如何通过商店作为道具

Question

我目前在将商店作为道具传递时遇到了问题，并且想知道该如何标注一些东西。

当前错误在create store中，我不确定该怎么办。

我尝试了其他方法，但只想使用将其作为道具传递的存储方法

import React from 'react';
import { MockGit } from './Constants';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import Button from '@material-ui/core/Button';
import TestAPI from './TestAPI';
import { displayGitData, userInfoURL, getDataSaga } from '../sagas/sagas';
import { createStore } from 'redux';


class GitData extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const store = createStore(...);   //this is what im unsure of.
    const { store } = this.props;
     return (

      <ExpansionPanel>
        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
          <Typography> {MockGit} </Typography>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          {displayGitData()}
          {userInfoURL()}
          {getDataSaga()}
          <TestAPI />
        </ExpansionPanelDetails>
      </ExpansionPanel>
     );
   }
 }
export default GitData;

目标是使商店作为道具传递而没有错误。

任何帮助都会很棒，谢谢！

Answer 1

您做错了，这是在Redux中使用React的推荐方法：

store.js

import { createStore } from 'redux';
export default createStore(...)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store.js'

const App = () => (<h1>Hello from App</h1>);

ReactDOM.render(
  <Provider store={store}><App/></Provider>
  document.querySelector('#react-root')
);

您现在有了一个与商店绑定的应用。

react-redux npm包还允许将组件prop绑定到存储调度和存储状态，例如：

my-component.js

import React from 'react';
import { connect } from 'react-redux';

class MyComponent extends React.Component {
  render() {
    return (
      <p>{this.props.hello}</p>
    )
  }
}

export default connect(state => ({hello: state.helloReducer.value}))(MyComponent)

有关更多教程，请查看react-redux或this good youtube playlist的官方文档。