Javascript ReactJs:从redux存储获取数据

Javascript ReactJs:从redux存储获取数据,javascript,reactjs,Javascript,Reactjs,我创建组件,将其连接到redux,初始化状态并创建reducer 组成部分: import fetchReducer from './reducers/fetchReducer'; import initialState from './constants/initialState'; const store = createStore(fetchReducer, initialState, devToolsEnhancer()); class Table extends React.Com

我创建组件,将其连接到redux,初始化状态并创建reducer

组成部分:

import fetchReducer from './reducers/fetchReducer';
import initialState from './constants/initialState';

const store = createStore(fetchReducer, initialState, devToolsEnhancer());

class Table extends React.Component {
  // constructor

   getDataFromState = function () {
      let propsContent = this.props;
      let itemsStored = propsContent.itemsProp;
      return itemsStored;
     };

   getOperationItems = function () {
      let itemsStored = this.getDataFromState();
      itemsStored.map((item, index) => (
          <li> key={index} item={item}</li>
       ))};

   render() {
       return (
           <div className={styles}>
               {this.getOperationItems()}
           </div>
         );
     }
 }

 const mapStateToProps = (store) => {
     return {itemsProp: store.items}
  };

 export default connect(mapStateToProps)(Table)

ReactDOM.render(
   <Provider store={store}>
       <Table/>,
    </Provider>,
   document.getElementById("app")
);
减速器:

 import initialState from '../constants/initialState';

 export default function update(state = initialState) {
           return state;
  }
但我无法从商店获得初始数据。在调试过程中,我在方法表#getDataFromState中看到propsContent包含空({})数组,而不是预期的[{'Date':1,'Operation':1 }]


调试中,我还看到,reducer接收到初始状态,并带有正确的数据:[{'Date':1,'Operation':1}]

如何注册传递给createStore的reducer?要将其用于mapStateToProps,这一点很重要:

您可以查看如何注册减速器的示例

更新


问题是如何使用连接的组件。如果您在另一个文件中定义它,然后导入它,您的代码工作得很好,正如您所看到的

不相关,但是您的
getOperationItems
函数没有返回任何内容,您需要
返回itemsStored.map(…)
我不清楚“Registered reducer”下的含义。在给定的示例中,使用了减速器的组合。但是如果我不能使用“组合减速器”?请您在给出的示例中说明一下reducers注册表,什么是“fetchReducer”?你如何定义它?在MapStateTops中检索它很重要,但是从您的代码中我无法理解它。你能给我看看吗?我在index.jsx中导入了它。所以“import fetchReducer from./reducers/fetchReducer”;“好的,问题不在于如何使用减速机。抱歉,我看不出问题:(harlott,太好了!你最后的建议奏效了!早些时候我打算将提供者分离到容器组件,但由于某些原因我犹豫了。谢谢!
 import initialState from '../constants/initialState';

 export default function update(state = initialState) {
           return state;
  }