Состояние не определено при использовании хранилища Redux в React - PullRequest
Новая
       16

Состояние не определено при использовании хранилища Redux в React

0 голосов
/ 15 мая 2019

У меня есть эта конфигурация при использовании response-redux connect (). 

 const mapStateToProps = state => ({
      ...state
    });
    const mapDispatchToProps = dispatch => ({
      addMessage: msg => dispatch(addMessage(msg))
    });

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

При использовании this.props.chats я получаю "TypeError: Cannot read property 'map' of undefined".

Это состояние, массивобъектов, которые имеют поля 'username' и 'content': 

chats = [{ content: '', username: '' }]

Это определяется в RoomChat.js следующим образом: 

  this.state = {
      chats: []
    };

Это store.jsгде определено резервное хранилище: 

import { createStore } from 'redux';
import MessageReducer from './reducers/MessageReducer';
function configureStore(chats = [{ content: '', username: '' }]) {
  return createStore(MessageReducer, chats);
}
export default configureStore;

Редуктор: 

export default (state, action) => {
  switch (action.type) {
    case 'addMessage':
      return {
        content: action.text,
        username: 'R'
      };
    default:
      return state;
  }
};

действие: 

export function addMessage(text) {
  return { type: 'addMessage', text };
}

Что здесь не так? Я пробовал несколько конфигураций безпока успех

Ответы [ 2 ]

1 голос
/ 15 мая 2019

В вашей функции mapStateToProps вам нужно сделать это ... 

const mapStateToProps = state => ({
  chats: state
});

Это потому, что вы создаете свой магазин с массивом chats, когда делаете createStore(MessageReducer, chats).

Так что state автоматически chats

UPDATE В дополнение к комментарию @ smoak вам необходимо обновить ваш редуктор, как этот 

export default (state, action) => {
  switch (action.type) {
    case 'addMessage':
      return [
        ...state,
        {
          content: action.text,
          username: 'R'
        }
      ];
    default:
      return state;
  }
};
0 голосов
/ 15 мая 2019

Мэйби попробуй это const mapStateToProps = state => {return {chats: state.chats}}; или это const mapStateToProps = state => { return {...state}}; Вам необходимо вернуть объект в mapStateToProps и mapDistpachToProps.

...