Redux/React：更改 activePage 时无法读取未定义的属性“类型”

Question

嘿嘿，这是我第一次在项目中使用 react/redux，所以我一直在将我的“导航”迁移到 redux 风格的实现，我（从这里开始）想要更改商店 state（activePage）点击一个按钮，然后我的应用程序应该通过该 activePage state 呈现任何处于活动状态的页面。

我被卡住了（应该强调我不确定什么是过度/覆盖的东西或缺少什么，我已经关注了一些关于动作/减速器/存储类型的在线教程（我打算做一个调度电话但似乎我可以直接从按钮单击调用 changePage 而不是调度（在实现调度时遇到问题））并且我一直在敲击桌子，以了解导入时如何未定义动作......也许我'我没有正确查看它...我是否缺少任何有助于诊断此错误的数据？：

TypeError：无法读取未定义的 allReducers 的属性“类型”.../client/src/redux/reducer/index.js:9 6 | activePage: '主页',

7 | }

8 | function allReducers(state = initState, action){

9 | 开关（动作。类型）{

10 | 案例 CHANGE_PAGE：

11 | 返回{

12 |...state,

登录按钮.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";

减速器/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;

应用程序.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>
    );
  }
}

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

Answer 1

缺少默认案例

如果调度了未知操作，您的减速器需要return state ，例如将 state 设置为初始值的“init”操作。

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

---

混合 State & Dispatch

connect HOC 需要两个 arguments： mapStateToProps和mapDispatchToProps 。 我认为这些名称是不言自明的。 那么为什么您的mapDispatchToProps function 将state作为参数而不是dispatch ？

如果使用connect ， LoginButtonThing应该访问已经绑定从其 props dispatch的changePage版本。 您可以像这样使用操作 object 速记：

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

但是你应该使用 hooks ，像这样：

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" （大写）。

---

不要这样做

你的代码有很多问题，很多只是“过时”，我们现在有更好的方法，比如 hooks 和Redux-Toolkit 。

我实际上认为像您尝试做的那样将导航 state 移动到 Redux 不是一个好主意，我建议您坚持使用 react-router。 你可以在这里阅读为什么你不需要或不想这样做。