Redux-Toolkit 状态未从商店传递。反应还原

Question

我正在尝试使用 Redux-Toolkit 转换一个简单的 React-Redux 项目。我使用 configureStore 创建了商店，但商店似乎没有将初始状态传递给子组件。

这是我的 redux-toolkit (redux-index.js) js 文件


    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

我的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;

最后 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;

当我尝试运行我的程序时，它抛出这个错误：


    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 (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

在 mapStateToProps 中，state 对象是 Redux 状态对象（与您从 store.getState() 获得的对象相同）。

您的状态 article 来自定义的切片：name : "article"，因此您需要将其更改为：

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

见mapStateToProps Docs。

Redux-Toolkit 状态未从商店传递。反应还原

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

javascript

reactjs

react-redux

react-redux-i18n

redux-toolkit