mapStateToProps返回未定义的值

Question

还原剂

const initialState = {
isLoadingDept:true,
isLoadingEmpDesig:true,
isLoadingEmpStatus:true,
isLoadingGroup:true
};
const isLoadingReducer = (state=initialState, action:any) =>{
switch (action.type) {
case "ISLOADING_Dept":
console.log(action.payload)
return {
isLoadingDept:action.payload  
};
case "ISLOADING_EmpDesig":
return {
isloadingEmpDesig:action.payload 
};
case "ISLOADING_EmpStatus":
return {
isLoadingEmpStatus:action.payload
};
case "ISLOADING_Group":
return{
isLoadingGroup:action.payload
};
default:
return state;
}
};
export default isLoadingReducer

存储

import {createStore} from 'redux'
import {combineReducers} from 'redux'
import isLoadingReducer from './reducers/isLoadingReducer'
const allReducers = combineReducers({
isLoading: isLoadingReducer
})
export default createStore(allReducers)

指数

import { render } from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import store from './redux/store'
import {Provider} from 'react-redux'
render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);

Emp-我想在中使用存储的文件

function mapStateToProps(state:any){
return {
isLoadingDept: state.isLoading.isLoadingDept,
isLoadingEmpDesig: state.isLoading.isLoadingEmpDesig,
isLoadingEmpStatus: state.isLoading.isLoadingEmpStatus,
isLoadingGroup: state.isLoading.isLoadingGroup

}
}
class EmpList extends Component<any, any> {
//State and stuff

componentDidMount(){
console.log(this.props.isLoadingDept)
}
//stuff
}
export  {EmpList as UnconnectedEmpList};
export default connect(mapStateToProps, {forwardRef:true})(EmpList)

最后一个文件中的控制台日志记录未定义。我做这个控制台日志是因为它没有正常工作，所以我想看看发生了什么。正如你所看到的，我也在Reducer中做了控制台日志，它返回了一个应该的值，所以这个部分工作正常。

Answer 1

您的reducers都设置了一个值，由于返回值没有引用原始状态，因此将该状态的其余部分丢弃，因此

{
isLoadingDept:true,
isLoadingEmpDesig:true,
isLoadingEmpStatus:true,
isLoadingGroup:true
};

将成为

{
isLoadingDept:true,
};

为了避免这种情况，进行

return {
...state,
isLoadingDept:action.payload  
};

此外，为了让你意识到这一点：这是一种相当古老的Redux风格，现在我们建议使用官方的Redux工具包以非常不同的方式编写。如果你只是在学习Redux，你可能会遵循一个非常过时的教程。请通读官方的"；Essentials"；在这种情况下的教程。