[英]Redux combineReducers not passing state to reducer
In the following code, data (state, action)
is not being passed to the reducers by combineReducers
. 在以下代码中,
combineReducers
不会将数据(state, action)
传递给reducer。 It generates the error below. 它会在下面生成错误。 Probably just a small mistake I'm making.
可能只是我犯的一个小错误。 Link to JSFiddle: https://jsfiddle.net/bengrunfeld/1h0t59uf/
链接到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')
)
Error Message 错误信息
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
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>
You need to let Redux know what the initial state is going to be. 你需要让Redux知道初始状态是什么。
Either in the reducers themselves (note es6 default argument) 在reducer中自己(注意es6默认参数)
Edit: I just noticed you did not return anything 编辑:我刚注意到你没有退货
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
}
Or in the second argument of CreateStore
或者在
CreateStore
的第二个参数中
Here is some comprehensive documentation on that: http://redux.js.org/docs/recipes/reducers/InitializingState.html 以下是一些全面的文档: http : //redux.js.org/docs/recipes/reducers/InitializingState.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.