无法访问减速器状态值以打印到演示组件中？

Question

我正在尝试使用 react 学习 redux，但无法理解 action、reducer 和所有东西的工作原理……我尝试阅读许多文档和教程，但无法理解这一点。

我想从 reducer 中获取一个 name 属性并将其打印到网页上。

所以，我的目录是这样的.....

各个文件的代码是： 名称.js：

export default function() {
  return [
    { firstName: "Robin"}
  ];
}

reducer 目录中的 index.js：

    import { combineReducers } from "redux";
    import Name from "./name";
    const rootReducer = combineReducers({
      name: Name
    });
    export default rootReducer;

以及我要打印道具的 index.js 的代码：

import React,{Component} from "react";
import { connect } from "react-redux";
class App extends Component {
  render(){
    return(
      <div>
        {this.props.firstName}
      </div>
    );
  }
}
function mapStateToProps(state)
{
  return{
    name: state.name
  };
}
export default connect(mapStateToProps)(App);

我收到错误，例如：

Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)".
▶ 22 stack frames were collapsed.
./src/index.js
src/index.js:6
  3 | import App from './App';
  4 | import registerServiceWorker from './registerServiceWorker';
  5 | 
> 6 | ReactDOM.render(<App />, document.getElementById('root'));
  7 | registerServiceWorker();
  8 | 
  9 | 
View compiled
▶ 6 stack frames were collapsed.

Answer 1

您需要创建商店，将其传递给组件可以“连接”到的Provider 组件。

所以你的根index.js 应该是这样的：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './App';

// create the store object from the root reducer
let store = createStore(todoApp); 

// wrap the App with a Provider HOC so we can "connect" to it
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

有关更多详细信息，您可以阅读docs

正如另一个答案中提到的，你的减速器返回一个array。
我猜你打算返回一个对象：

return {firstName: Name}

另一个问题是，在您的组件内部，您将传递给App（通过mapStateToProps）一个道具name 以反映这个特定的reducer。
所以你应该像这样访问它：

this.props.name.firstName

Answer 2

在你的 Redux reducer 中，你提到 name 作为一个对象数组

[
  { firstName: "Robin"}
]

同样根据mapStateToProps，你的道具名称是name

所以你必须使用

return(
  <div>
    {this.props.name[0]}
  </div>
);

或map 覆盖this.props.name 并打印多个名称。