Redux-Toolkit state not passed from the store. react-redux

Question

I am trying to convert a simple React-Redux project using Redux-Toolkit. I created store using configureStore but the store doesn't seem to pass down the initial state to children component.

This is my redux-toolkit (redux-index.js) js file

    import { configureStore, 
        getDefaultMiddleware, 
        createSlice } from "@reduxjs/toolkit"


    const middleWare  = [
        ...getDefaultMiddleware(),
    ]

    const articleState = {
        articles: [],
        remoteArticles: [],
    }

    const articleSlice = createSlice({
        name : "article",
        initialState: articleState,
        reducers: {
            addArticle : (state, action) => {
                state.articles = state.articles.concat(action.payload)
            }
        }

    })

    export const { addArticle } = articleSlice.actions
    const articleReducer = articleSlice.reducer;

    const store = configureStore({
        reducer : {
            article : articleReducer,
        },
        middleWare
    })

    export default store

My index.js

    import React from "react";
    import { render } from "react-dom";
    import { Provider } from "react-redux";
    import store from './redux-index';
    import App from "./App";

    render(
      <Provider store={store}>
        <App />
      </Provider>,
      // The target element might be either root or app,
      // depending on your development environment
      // document.getElementById("app")
      document.getElementById("root")
    );

App.js

    import React from 'react';
    import List from './components/List';
    import Form from './components/Form';

    const App = () => (
      <>
        <div>
          <h2>Articles</h2>
          <List /> 
        </div>
        <div>
          <h2>Add a new article</h2>
          <Form />
        </div>
      </>
    );

    export default App;

And finally 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;

When I try to run my program, it throws this error:

    Uncaught TypeError: Cannot read property 'map' of undefined
    at ConnectedList (List.js:9)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at render (react-dom.development.js:24840)
    at Module../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (redux-index.js:36)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Answer 1

In mapStateToProps, state object is the Redux state object (same one that you get from store.getState()).

You have the state article which comes from the defined slice: name : "article", so you need to change it to:

const mapStateToProps = state => {
  return { articles: state.article.articles };
};

See mapStateToProps Docs.