我得到未定义，而试图访问状态从根减速器与redux工具包

Question

试图访问状态时返回Undefined。

片:

const initialState = { valid: false };
const validNameSlice = createSlice({
name: "validName",
initialState,
reducers: {
makeNameValid(state) {
state.valid = true;
},
makeNameInvalid(state) {
state.valid = false;
}
}
});
export const {
makeNameValid,
makeNameInvalid
} = validNameSlice.actions;
export default validNameSlice.reducer;

组合减速机:(实际上不止一个减速机)

import { combineReducers } from "redux";
import validSlice from "./validSlice";
const reducers = {
validSlice
};
const rootReducer = combineReducers(reducers);
export default rootReducer;

存储:

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./rootReducers";
const store = configureStore({
reducer: {
rootReducer
}
});
export default store;

组件:

import { makeNameValid, makeNameInvalid } from "./validSlice";
import { connect } from "react-redux";
class App extends React.Component {
handleClick = () => {
console.log(this.props.isValidName);
};
handleDispatch = () => {
this.props.makeNameValid();
};
handleDispatchFalse = () => {
this.props.makeNameInvalid();
};
render() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<button onClick={() => this.handleClick()}>test</button>
<button onClick={() => this.handleDispatch()}>Make true</button>
<button onClick={() => this.handleDispatchFalse()}>Make false</button>
</div>
);
}
}
const mapStateToProps = (state) => ({
isValidName: state.validSlice
});
const mapDispatchToProps = (dispatch) => ({
makeNameValid: () => dispatch(makeNameValid()),
makeNameInvalid: () => dispatch(makeNameInvalid())
});
export default connect(mapStateToProps, mapDispatchToProps)(App);

最初没有根减速器，但有了根减速器，日志中的状态返回undefined

codesandbox链接:https://codesandbox.io/s/holy-shadow-ii8fs9?file=/src/App.js

Answer 1

您的配置中有一个小错误-您正在包装您的rootReducer，但您只需要将其作为reducer参数传递:

const store = configureStore({
reducer: rootReducer,
});