Xon*_*onu 6 javascript reactjs react-redux
该页面不呈现,引用TypeError: state is undefined,追溯到SelectForm.js 中的这一行:const filter = useSelector(state => state.filter);。
我花了几个小时试图弄清楚我做错了什么。我试过 createSelector 但这没有用。我试过分派“获取初始状态”操作,但没有奏效。该组件被包装在提供者标签中。我不确定为什么我无法访问该州。在这一点上,我看不到任何我一直在研究它的缺陷。
代码片段
减速器.js
let initialState = {
filter: {
country: null,
state: null,
level: null,
team: null
},
isDBConnecting: false,
isDBConnected: false,
isDBError: false
}
const SelectorReducer = (state=initialState, action) => {
switch (action.type) {
case 'DB_CONNECT_INIT':
return {
...state,
isDBConnecting: true,
isDBConnected: false,
isDBError: false,
};
...
...
}
export default SelectorReducer;
Run Code Online (Sandbox Code Playgroud)
动作.js
export const initializeDBConnection = () => {
return {
type: 'DB_CONNECT_INIT'
}
};
Run Code Online (Sandbox Code Playgroud)
父组件.js
import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux'; //import provider to provide component access to the state
//Component imports
import SelectForm from './components/SelectForm'
import SelectorReducer from '.../reducer.js'
const SelectorStore = createStore(SelectorReducer);
const ParentComponent = () => {
return (
<div className="page-container">
<div id="carousel">
<div id="wrapper">
<Provider store={SelectorStore}>
<SelectForm />
</Provider>
</div>
</div>
</div>
)
}
Run Code Online (Sandbox Code Playgroud)
SelectForm.js(子组件,包裹在上面的Provider标签中)
//IMPORTS
import React from 'react'; //import react
import { useSelector, useDispatch } from 'react-redux';
//COMPONENT IMPORTS
import FormGroup from '../FormGroup';
import { * as actions } from '.../actions.js';
const SelectForm = (props) => {
//STATEFUL IMPORTS
//filter
const filter = useSelector(state => state.filter);
Run Code Online (Sandbox Code Playgroud)
感谢@NicholasTower 在评论中的回答。我的减速器没有默认情况下
default: return state
Run Code Online (Sandbox Code Playgroud)
把它放进去解决了这个问题。
| 归档时间: |
|
| 查看次数: |
9843 次 |
| 最近记录: |