Redux createStore/applyMiddleWare Q

Posted 2023-02-19

【中文标题】Redux createStore/applyMiddleWare Q

【英文标题】：

【发布时间】：2019-02-04 20:53:10

【问题描述】：

我是 Redux 的新手，并遵循了在 react 中实现 redux 的教程。我遇到的问题似乎是 app.js 从 store.js 的 createStore 函数收到的任何价值。有什么想法吗？

app.js

import React,  Component  from 'react';
import AppNavbar from './components/AppNavbar';
import ShoppingList from './components/ShoppingList';
import ItemModal from './components/ItemModal';
import  Container  from 'reactstrap';

import  Provider  from 'react-redux';
import store from './store';

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

class App extends Component 
  render() 
      return (
         <Provider store=store>
           <div className="App">
            <AppNavbar />
            <Container>
            <ItemModal />
            <ShoppingList />
          </Container>
        </div>
      </Provider>
    );
  


export default App;

store.js

 import  createStore, applyMiddleware, compose  from 'redux';
 import thunk from 'redux-thunk';
 import rootReducer from './reducers';

 const initialState = ;

 const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
compose(
  applyMiddleware(thunk)
  )
);

导出默认存储；

reducers 文件夹 itemReducer.js - 仅显示 GET_ITEMS 案例

import 
  GET_ITEMS,
  ADD_ITEM,
  DELETE_ITEM,
  ITEMS_LOADING
 from '../actions/types';

const initialState = 
  items: [],
  loading: false
;

export default function(state = initialState, action) 
  switch (action.type) 
    case GET_ITEMS:
      return 
        ...state,
        items: action.payload,
        loading: false
      ;

index.js

import  combineReducers  from 'redux';
import itemReducer from './itemReducer';

export default combineReducers(
  item: itemReducer
);

错误：

TypeError：无法读取未定义的属性“应用” （匿名函数） C://client/node_modules/redux/es/redux.js:523

  return funcs.reduce(function (a, b) 
    return function () 
      return a(b.apply(undefined, arguments));
    ;
  );

创建商店 C://client/node_modules/redux/es/redux.js:87

 throw new Error('Expected the enhancer to be a function.');
 

 return enhancer(createStore)(reducer, preloadedState);


if (typeof reducer !== 'function') 

./src/store.js C://client/src/store.js:9

const middleware = [thunk];

const store = createStore(
rootReducer,
initialState,
compose(             

【问题讨论】：

你在读什么教程？您在哪里看到以您的方式使用带有嵌套 compose 和 applymidddlware 的 createstore 的示例？

还有，你的 rootreducer 是什么样子的

youtube.com/playlist?list=PLillGF-RfqbbiTGgA77tGO426V3hRF9iE他完成的代码可在描述中下载

已编辑问题以包括我的 itemReducer.js 文件（仅 GET_ITEMS 操作）还包括导入 ./itemReducer 的 index.js 文件

你发现你的错误了吗？ （提示：你永远不会在任何地方使用middleware）

【参考方案1】：

该错误与Redux DevTools Chrome 扩展集成有关，它使您能够在浏览器中直观地查看 Redux 商店。安装Redux DevTools 扩展应该可以解决问题。如果您不想使用扩展，您可以简单地省略以下代码以删除与扩展的集成：

, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()