Question

在以下代码中，(state, action)未将数据combineReducers传递给reducer。它会在下面生成错误。可能只是我犯的一个小错误。链接到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

＆＃13;

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')
)

＆＃13;

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

＆＃13;

您需要为每个减速器定义初始状态。
此外，您应该从减速机返回一个州。

Answer 2

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

在reducer中自己（注意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

Redux combineReducers没有将状态传递给reducer

2 个答案: