Trying to learn react-redux but my outcome is different to the learning materials

Hello,

I am following this article to learn about react redux -> https://www.valentinog.com/blog/redux/

I followed it step by step, yet I can’t figure out why I’m receiving an error. I was hoping someone would be able to spot it.

In the article, the author starts the development server and opens a console in the browser. In the console, they are able to call store.getState() to return the array of articles. If I try to do it, it comes back stating that store is not defined:

Uncaught ReferenceError: store is not defined

src/index.js ->

import React from ‘react’; import {render} from “react-dom”; import { Provider } from ‘react-redux’; import store from “./js/store/index”; import App from “./js/components/App”; render( <Provider store={store}> <App /> </Provider>, document.getElementById(“root”) );

src/js/index.js ->

import store from “../js/store/index”; import { addArticle } from “../js/actions/index”; window.store = store; window.addArticle = addArticle;

src/js/store/index.js ->

import { createStore } from “redux”; import rootReducer from “../reducers/index”; const store = createStore(rootReducer); export default store;

src/js/reducers/index.js ->

import { ADD_ARTICLE } from “../constants/action-types”; const initialState = { articles: [] }; function rootReducer(state=initialState, action){ if (action.type === ADD_ARTICLE){ return Object.assign({}, state, { articles: state.articles.concat(action.payload) }); } return state; }; export default rootReducer;

src/js/actions/index.js ->

import { ADD_ARTICLE } from “../constants/action-types”; export function addArticle(payload){ return {type: ADD_ARTICLE, payload}; };

src/js/components/App.js ->

import React from ‘react’; import List from ‘./List’; const App = () => ( <div> <h2>Articles</h2> <List /> </div> ); export default App;

src/js/components/List.js ->

import React from ‘react’; import {connect} from ‘react-redux’; const mapStateToProps = state => { return {articles: state.articles}; }; const ConnectedList = ({articles}) => ( <ul> {articles.map(el => ( <li key={el.id}>{el.title}</li> ))} </ul> ); const List = connect(mapStateToProps)(ConnectedList); export default List;

src/js/constants/action-types.js ->

export const ADD_ARTICLE = “ADD_ARTICLE”;

I tried to go over each file to make sure that they’re the same as in the article, but I did not spot any differences. Would someone be able to help?

Thank you!