Gatsby Redux combineReducers 函数

Question

我正在学习 Redux，在尝试使用 Redux 设置 Gatsby 时遇到了问题。我在使用 createStore 时遇到此错误：

C:/Users/wools/github/nutritionist-website/gatsby-site/node_modules/redux/es/redux.js:91 Uncaught (in promise) Error: Expected the reducer to be a function.
    at createStore (C:/Users/wools/github/nutritionist-website/gatsby-site/node_modules/redux/es/redux.js:91)
    at Module._default (C:/Users/wools/github/nutritionist-website/gatsby-site/ReduxWrapper.js:42)
    at eval (C:/Users/wools/github/nutritionist-website/gatsby-site/.cache/api-runner-browser.js:51)
    at Array.map (<anonymous>)
    at exports.apiRunner (C:/Users/wools/github/nutritionist-website/gatsby-site/.cache/api-runner-browser.js:39)
    at Module.eval (C:/Users/wools/github/nutritionist-website/gatsby-site/.cache/root.js:234)
    at eval (C:/Users/wools/github/nutritionist-website/gatsby-site/.cache/root.js:292)
    at Module../.cache/root.js (commons.js:1064)
    at __webpack_require__ (commons.js:726)
    at fn (commons.js:101)
    at eval (C:/Users/wools/github/nutritionist-website/gatsby-site/.cache/app.js:95)

我正在导出使用来自 reducers/index.js 的 combineReducers() 获得的单个 reducer，正如官方 redux 文档所推荐的那样。我认为主要问题是 combineReducers() 返回的是对象而不是函数。

ReduxWrapper.js

import React from 'react';
import { Provider } from 'react-redux';
import { getAllProducts } from './src/actions'
import { createStore, applyMiddleware } from 'redux'
import { createLogger } from 'redux-logger'
import thunk from 'redux-thunk'
import rootReducer from './src/reducers/';

const middleware = [ thunk ];
if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger());
}

const store = createStore(
  rootReducer,
  applyMiddleware(...middleware)
)

store.dispatch(getAllProducts())

export default ({ element }) => (
  <Provider store={createStore()}>{element}</Provider>
);

组合reducer在文件reducers/index.js中找到：

import { combineReducers } from 'redux'
import cart, * as fromCart from './cart'
import products, * as fromProducts from './products'

const rootReducer = combineReducers({
  cart,
  products
})

const getAddedIds = state => fromCart.getAddedIds(state.cart)
const getQuantity = (state, id) => fromCart.getQuantity(state.cart, id)
const getProduct = (state, id) => fromProducts.getProduct(state.products, id)

export const getTotal = state =>
  getAddedIds(state)
    .reduce((total, id) =>
      total + getProduct(state, id).price * getQuantity(state, id),
      0
    )
    .toFixed(2)

export const getCartProducts = state =>
  getAddedIds(state).map(id => ({
    ...getProduct(state, id),
    quantity: getQuantity(state, id)
  }))

  export default rootReducer;

我的开发环境：

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "1.0.0",
  "author": "David W",
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/free-brands-svg-icons": "^5.12.1",
    "@fortawesome/free-solid-svg-icons": "^5.12.1",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@reach/router": "^1.3.3",
    "bootstrap": "^4.4.1",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "gatsby": "^2.19.45",
    "gatsby-background-image": "^0.10.2",
    "gatsby-image": "^2.2.43",
    "gatsby-plugin-env-variables": "^1.0.1",
    "gatsby-plugin-manifest": "^2.2.39",
    "gatsby-plugin-offline": "^3.0.32",
    "gatsby-plugin-react-helmet": "^3.1.23",
    "gatsby-plugin-sass": "^2.1.29",
    "gatsby-plugin-sharp": "^2.4.3",
    "gatsby-source-filesystem": "^2.1.46",
    "gatsby-transformer-sharp": "^2.3.13",
    "google-map-react": "^1.1.6",
    "jquery": "^3.4.1",
    "node-sass": "^4.13.1",
    "nodemailer": "^6.4.3",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-dom": "^16.13.1",
    "react-fontawesome": "^1.7.1",
    "react-helmet": "^5.2.1",
    "react-map-gl": "^5.2.3",
    "react-redux": "^5.1.2",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "typescript": "^3.8.3"
  },
  "devDependencies": {
    "prettier": "^1.19.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "heroku-postbuild": "gatsby build",
    "start": "gatsby serve",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gatsbyjs/gatsby-starter-default.git"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  },
  "homepage": "https://github.com/gatsbyjs/gatsby-starter-default#readme",
  "main": "gatsby-browser.js"
}

Answer 1

你能用下面的修改ReduxWrapper.jsx试试吗？

import React from 'react';
import { Provider } from 'react-redux';
import { getAllProducts } from './src/actions'
import { createStore, applyMiddleware } from 'redux'
import { createLogger } from 'redux-logger'
import thunk from 'redux-thunk'
import rootReducer from './src/reducers/';

const middleware = [ thunk ];
if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger());
}

const store = createStore(
  rootReducer,
  applyMiddleware(...middleware)
)

store.dispatch(getAllProducts())

export default ({ element }) => (
  <Provider store={store}>{element}</Provider>
);