React-Redux：未捕获的类型错误：无法读取未定义的属性“名称”

Question

我是 Redux 世界的新手，我正在尝试将它与 React 联系起来。 我用下一种方式构建了我的应用程序：

index.js：

const userReducer = (state={
  name: "max"
}, action) => {

  switch(action.type){
    case "SET_NAME":
      state = {
        ...state,
        name: action.payload
      };
    break;
  return state;
};

const myLogger= (store) =>(next)=>(action)=>{
  console.log("logged action: ",action);
  next(action);
};
const store = createStore(combineReducers({user: userReducer}),{}, applyMiddleware(myLogger,logger));

store.subscribe(()=>{
  console.log("Store upadated", store.getState());
});

ReactDOM.render(

   <BrowserRouter>
    <Provider store={store}>
    <App/>
    </Provider>
  </BrowserRouter>,

    window.document.getElementById('container')); 

app.js：

class App extends React.Component{

      render(){
        return(

        <div>
         <SearchBar
           username = {this.props.user.name}/>
        </div>
       )
      }  
    }

    const mapStateToProps = (state) => {
      return{
        user: state.user,
        math: state.math
      };
    };

    const mapDispatchToProps = (dispatch) => {
      return{
        setName: (name) =>{
            dispatch({
                type: "SET_NAME",
                payload: name
            });
        }
      };
    };

    export default connect(mapStateToProps, mapDispatchToProps)(App);

searchBar.js：

export default class SearchBar extends React.Component{

    render(){
        return(
            <div>
                Name: {this.props.username}
            </div>
        )
    }
}

当我试图将来自userReducer 的name 变量传递给SearchBar 组件时，它似乎无法识别。

我不知道为什么？我是否可能通过尝试使用 Provider 来提供存储来构建我的 index.js 错误？还是我的连接功能有问题？

错误：

Uncaught TypeError: Cannot read property 'name' of undefined
    at component (app.js:141)
    at mountIndeterminateComponent (react-dom.development.js:8574)
    at beginWork (react-dom.development.js:8978)
    at performUnitOfWork (react-dom.development.js:11814)
    at workLoop (react-dom.development.js:11843)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at replayUnitOfWork (react-dom.development.js:11318)
    at renderRoot (react-dom.development.js:11885)

Answer 1

我认为您的代码应该可以工作，或者您的导入错误，我看到的唯一缺少的是括号：

switch(action.type) {
  case "SET_NAME":
    state = {
      ...state,
      name: action.payload
    };
    break;
  }
  return state;
}

而且我认为您的 Provider 也应该包装路由器。 但目前，这不应该是阻塞的。

你也可以使用redux dev tools（浏览器扩展）看看问题出在哪里：

要使用它，请将此行添加到 index.js：

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(combineReducers({user: userReducer}), composeEnhancers(applyMiddleware(myLogger)));

Answer 2

在 redux 中...您永远不会更改状态的原始副本...您需要在执行每个操作时返回一个新副本。

而且您还需要在执行任何操作之前返回一个初始值...认为您的 switch default case ... 用于应用加载时的 redux 存储初始化

const userReducer = (
      state = {
        name: 'max',
      },
      action,
    ) => {
      switch (action.type) {
        case 'SET_NAME':
          return {
            ...state,
            name: action.payload,
          };

        default:
          return state;
      }
    };