Can't access reducer state values for printing into presentational component?

Question

I'm trying to learn redux with react and cam't able to understand how action, reducer and all stuff works... I try to read many docs and tutorials but can't able to get this point.

I want to take a name prop from reducer and print it to the webpage.

So, my directory is something like this.....

and code for respective files are: name.js:

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

index.js from reducer directory:

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

And code for index.js where I want to print props:

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);

And I'm getting error such as:

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

In your Redux reducer you have mentioned name as an array of objects

[
  { firstName: "Robin"}
]

Also according to mapStateToProps your prop name is name

So you have to use

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

or map over this.props.name and print multiple names.

Answer 2

You need to create the store, pass it to the Provider component which the component can "connect" to.

So your root index.js should look something like this:

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')
);

For more detailed info you can read the docs

As mentioned in another answer, your reducer is returning an array.
I'm guessing you meant to return an object:

return {firstName: Name}

Another issue is that inside your component you are passing to App (via mapStateToProps) a prop name to reflect this specific reducer.
So you should access it like this:

this.props.name.firstName