Heyo这是我第一次在项目中使用 react/redux，所以我一直在将我的"导航"迁移到 redux 风格的实现中，我(从这里开始)想在单击按钮时更改存储状态 (activePage)，然后我的应用程序应该通过该 activePage 状态呈现任何处于活动状态的页面。
我被困住了(应该强调的是，我不确定什么是落水/覆盖的东西或缺少的东西，我已经遵循了一些关于动作/减速器/商店类型东西的在线教程(我打算做一个调度电话，但似乎我可以直接从按钮单击而不是调度调用 changePage(在实现调度时遇到问题))，我一直在用头撞桌子，关于当操作如何未定义时导入它...也许我没有正确看待它...我是否缺少任何有助于诊断此错误的数据？
类型错误： 无法读取未定义的属性"类型" 全部减速机 .../client/src/redux/reducer/index.js：9 6 | 活动页面："主页"，
7 | }
8 | function allReducers(state = initState， action){
9 | switch(action.type){
10 | 案例CHANGE_PAGE：
11 | 返回{
12 | ...州
登录按钮.js
const mapDispatchToProps = (state) => {
return {
changePage : state.activePage
}
};
function LoginButtonThing (){
return(
<div>
<button onClick={() =>(changePage('loginPage'))}>Login Page</button>
</div>
)
}
//export default LoginButtonThing;
export default connect(null,mapDispatchToProps)(LoginButtonThing);
操作.js
import {
CHANGE_PAGE,
} from "../constants/action-types";
export const changePage = (activePage) => ({
type: CHANGE_PAGE,
payload: {
activePage,
},
});
操作类型.js
export const CHANGE_PAGE = "CHANGE_PAGE";
减速器/索引器.js
import {CHANGE_PAGE} from "../constants/action-types";
import {changePage} from "../actions/actions"
const initState = {
activePage: 'HomePage',
}
function allReducers(state = initState, action){
switch(action.type){
case CHANGE_PAGE:
return{
...state,
activePage :action.payload.activePage,
};
}
}
//const store = createStore(rootReducer);
export default allReducers;
应用.js
class App extends React.Component {
render() {
//this.props.activePage = 'HomePage';
let renderedPage;
if (this.props.changePage === "LoginPage") renderedPage = <LoginPage/>;
else if (this.props.changePage === "HomePage") renderedPage = <HomePage/>;
else renderedPage = <HomePage/>;
//defaultStatus:activePage = "HomePage";
return (
<div id="App">
{renderedPage}
</div>
);
}
}
索引.js
import {createStore, combineReducers} from 'redux';
import allReducers from "./redux/reducer"
//import LoginPage from "./loginPage";
import {Provider} from "react-redux";
const store = createStore(
allReducers,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
ReactDOM.render(
<Provider store = {store}>
<React.StrictMode>
<BrowserRouter>
<Route exact path="/" component = {HomePage}>
<Route path= "/loginPage" component ={LoginPage} />
</Route>
</BrowserRouter>
<App />
</React.StrictMode>
</Provider>,
document.getElementById('root')
);
缺少默认大小写
化简器需要return state是否调度了未知操作，例如将状态设置为初始值的"init"操作。
function allReducers(state = initState, action) {
switch (action.type) {
case CHANGE_PAGE:
return {
...state,
activePage: action.payload.activePage
};
default:
return state;
}
}
Mixed up State & Dispatch
connectHOC 采用两个参数：mapStateToProps和mapDispatchToProps。 我认为这些名字是不言自明的。 那么为什么你的mapDispatchToProps函数将state作为参数而不是dispatch？
如果使用connect，LoginButtonThing应该访问已经绑定到dispatch的changePage版本。 您可以使用动作对象简写，如下所示：
import { connect } from "react-redux";
import { changePage } from "../store/actions";
function LoginButtonThing({ changePage }) {
return (
<div>
<button onClick={() => changePage("loginPage")}>Login Page</button>
</div>
);
}
export default connect(null, { changePage })(LoginButtonThing);
但是你应该使用钩子，像这样：
import { useDispatch } from "react-redux";
import { changePage } from "../store/actions";
export default function LoginButtonThing() {
const dispatch = useDispatch();
return (
<div>
<button onClick={() => dispatch(changePage("loginPage"))}>Login Page</button>
</div>
);
}
命名不一致
这实际上并没有导航到LoginPage组件！ 这是因为LoginButtonThing页面更新为"loginPage"(小写)，但App正在寻找字符串"LoginPage"(大写)。
不要这样做
你的代码有很多问题，很多只是"过时"，我们现在有更好的方法，比如钩子和 Redux-Toolkit。
我实际上认为像您尝试的那样将导航状态移动到 Redux 中不是一个好主意，我建议您坚持使用 react-router。 您可以在此处阅读为什么您不需要或不想这样做。