Javascript Redux/React:无法读取属性'；类型'；更改activePage时未定义的

Heyo这是我第一次在项目中使用react/redux，因此我一直在将我的“导航”迁移到redux风格的实现中，在这里开始时，我希望在点击按钮时更改存储状态（activePage），然后我的应用程序应该通过该activePage状态呈现任何处于活动状态的页面

我被卡住了（应该强调的是，我不确定这里面有哪些内容太多/覆盖了，或者缺少了哪些内容，我已经学习了一些关于action/reducer/store类型的在线教程（我本来要做一个分派调用，但似乎我可以通过点击按钮来调用changePage，而不是分派（执行分派时遇到问题））我一直在用头撞桌子，想知道在导入操作时如何定义它……也许我没有正确地查看它……我是否丢失了任何有助于诊断此错误的数据？：

TypeError:无法读取未定义的属性“type” 所有还原剂 …/client/src/redux/reducer/index.js:9 6 |活动页面：“主页”

7 |}

8 |函数所有还原器（状态=初始状态，动作）{

9 |开关（动作型）{

10 |案例变更|页面：

11 |返回{

12 |……国家

loginButton.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);

action-types.js

export const CHANGE_PAGE = "CHANGE_PAGE";

reducer/index.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;

App.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>
    );
  }
}

类应用程序扩展了React.Component{
render（）{
//this.props.activePage='HomePage'；
让renderedPage；
如果（this.props.changePage==“LoginPage”）renderepage=；
如果（this.props.changePage==“HomePage”）呈现页面=；
else renderdpage=；
//默认状态：activePage=“主页”；
返回(
{renderedPage}
);
}
}

index.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')
);

从'redux'导入{createStore，combinereducer}；
从“/redux/reducer”导入所有还原程序
//从“/LoginPage”导入登录页面；
从“react redux”导入{Provider}；
const store=createStore(
所有还原剂，
窗口.\uuuuRedux\uDevTools\uuuu扩展&&window.\uuuuRedux\uDevTools\uuuu扩展（）
);
ReactDOM.render(
,
document.getElementById（'root'））
);

缺少默认情况 如果调度了未知操作，例如将状态设置为初始值的“init”操作，则reducer需要返回状态

function allReducers(state = initState, action) {
  switch (action.type) {
    case CHANGE_PAGE:
      return {
        ...state,
        activePage: action.payload.activePage
      };
    default:
      return state;
  }
}

---

混淆状态与调度

connect

HOC有两个参数：

mapStateToProps

和

mapsDispatchToprops

。我认为这些名称是不言自明的。那么为什么您的

mapsDispatchToprops

函数将

state

作为参数而不是

dispatch

如果使用

connect

，

login按钮

应访问一个版本的

changePage

，该版本已从其道具绑定到

dispatch

。您可以这样使用：

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>
  );
}

从“react redux”导入{connect}；
从“./store/actions”导入{changePage}；
函数登录按钮（{changePage}）{
返回(
更改页面（“登录页面”）}>登录页面
);
}
导出默认连接（null，{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>
  );
}

从“react redux”导入{useDispatch}；
从“./store/actions”导入{changePage}；
导出默认函数LoginButtohing（）{
const dispatch=usedpatch（）；
返回(
发送（更改页面（“登录页面”）}>登录页面
);
}

---

命名不一致 这实际上并没有导航到

LoginPage

组件！这是因为

loginputton

将页面更新为

“LoginPage”

（小写），但

App

正在查找字符串

“LoginPage”

（大写）

---

不要这样做 你的代码有很多错误，很多都是“过时的”，我们现在有更好的方法，比如钩子和

---

事实上，我认为将导航状态移动到Redux并不是一个好主意，我建议你坚持使用react router。你可以解释为什么不需要或不想这样做。

嘿，谢谢你的输入！添加案例编辑分派/案例确实允许应用程序在单击时更改activePage状态。我不能hink我同意将导航迁移到Redux可能是个坏主意，尽管我现在可能太深陷其中了（可以这么说）。我想我会在我的应用程序的其他状态下使用Redux，但我想把它作为概念证明（尽管不承认这是最好的证明），并将在下一个实现中切换回React router。单击时，它确实会更改状态，但应用程序似乎不会显示到正确的页面（保持在主页上）@ArthurS您是否解决了我提到的名称不匹配的问题？

“loginPage”

与

“loginPage”相比

？这就是你没有导航的原因。也许你应该使用

.toLowerCase（）

在你的

应用程序中进行不区分大小写的匹配。是的，我已经（将应用程序更改为this.props.changePage==“loginPage”，loginButton.js有onClick={（）=>调度（changePage（“loginPage”））.Redux DevTools说它确实在更改状态，但由于某种原因，它似乎没有在状态更改时呈现它