Redux combineReducers 没有将状态传递给 reducer

Question

在下面的代码中，数据(state, action) 没有通过combineReducers 传递给reducers。它会生成以下错误。可能只是我犯的一个小错误。链接到 JSFiddle：https://jsfiddle.net/bengrunfeld/1h0t59uf/

import React from 'react'
import { render } from 'react-dom'
import { combineReducers } from 'redux'
import { Constants } from './constants/constants'


const goal = (state = 0, action) => {
  (action.type === Constants.ADD) ?
    state + action.payload:
    state
}

const target = (state = 0, action) => {
  (action.type === Constants.REMOVE)?
    state - action.payload:
    state
}

const reducer = combineReducers({
  goal,
  target
})

const state = 10

const newState = reducer(state, {
  type: Constants.REMOVE,
  payload: 5
})

render(
  <div>
    <p>{newState}</p>
  </div>,
  document.getElementById('main')
)

错误信息

main.bundle.js:28054 Uncaught Error: Reducer "goal" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined.
    at http://localhost:3000/main.bundle.js:28054:13
    at Array.forEach (native)
    at assertReducerSanity (http://localhost:3000/main.bundle.js:28049:25)
    at combineReducers (http://localhost:3000/main.bundle.js:28104:5)
    at Object.<anonymous> (http://localhost:3000/main.bundle.js:13236:42)
    at __webpack_require__ (http://localhost:3000/main.bundle.js:20:30)
    at Object.<anonymous> (http://localhost:3000/main.bundle.js:31673:18)
    at __webpack_require__ (http://localhost:3000/main.bundle.js:20:30)
    at module.exports (http://localhost:3000/main.bundle.js:66:18)
    at http://localhost:3000/main.bundle.js:69:10

Answer 1

const Constants = {
  REMOVE: "REMOVE",
  ADD: "ADD"
}

const goal = (state = 5, action) => {
  return (action.type === Constants.ADD) ?
    state + action.payload:
    state
}

const target = (state = 5, action) => {
  return (action.type === Constants.REMOVE)?
    state - action.payload:
    state
}

const reducer = Redux.combineReducers({
  goal,
  target
})

const state = {goal: 10, target:5}

const newState = reducer(state, {
  type: Constants.REMOVE,
  payload: 5
})

console.log(newState);

ReactDOM.render(
  <div>
    <p>{newState.goal}</p>
    <p>{newState.target}</p>
  </div>,
  document.getElementById('main')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>


<div id="main"></div>

1. 您需要为每个 reducer 定义一个初始状态。
2. 您还应该从减速器返回一个状态。

Answer 2

你需要让 Redux 知道初始状态会是什么。

无论是在减速器本身（注意 es6 默认参数）

编辑：我刚刚注意到你没有返回任何东西

const goal = (state = 0, action) => {
  return (action.type === Constants.ADD) ?
    state + action.payload:
    state
}

const target = (state = 0, action) => {
  return (action.type === Constants.REMOVE)?
    state - action.payload:
    state
}

或者在CreateStore的第二个参数中

以下是一些全面的文档： http://redux.js.org/docs/recipes/reducers/InitializingState.html