React-Redux: Uncaught TypeError: Невозможно прочитать свойство 'name' из неопределенного - PullRequest
Новая
       12

React-Redux: Uncaught TypeError: Невозможно прочитать свойство 'name' из неопределенного

0 голосов
/ 26 марта 2019

Я новичок в мире 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>
        )
    }
}

Похоже, переменная name из userReducer не распознается, когда я пытаюсь передать ее компоненту SearchBar.

Я не уверен, почему? Возможно, я неправильно структурировал index.js, пытаясь использовать Provider для предоставления магазина? Или, может быть, что-то не так с моей функцией подключения?

ОШИБКА: 

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)

Ответы [ 2 ]

0 голосов
/ 26 марта 2019

Я думаю, что ваш код должен работать, или, возможно, ваш импорт неправильный, единственное, что я вижу, пропущено, это скобка:

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

И я думаю, что ваш провайдер должен обернутьМаршрутизатор тоже.Но на данный момент это не должно быть блокировкой.

Вы также можете воспользоваться инструментами redux dev (расширение браузера), чтобы увидеть, откуда возникла проблема:

Чтобы использовать его, добавьте следующие строки вindex.js: 

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(combineReducers({user: userReducer}), composeEnhancers(applyMiddleware(myLogger)));
0 голосов
/ 26 марта 2019

В приставке ... вы никогда не изменяете исходную копию состояния ... вам нужно возвращать новую копию при каждом выполненном действии.

И вам также нужно вернуть начальное значение перед выполнением каких-либо действий ... подумал, что ваше switch default case ... для инициализации избыточного хранилища при загрузке приложения 

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

        default:
          return state;
      }
    };
...