Редуктор не связан с редуксным состоянием

Question

Я пытаюсь с помощью простого объектного редуктора отобразить данные в компоненте. Но состояние этого объекта не зависит от компонента. Структура кода, как показано ниже.

метки. js:

  export default function () {
    return [
    { id: 1, name: "Labels1"},
    { id: 2, name: "Labels2"}
    ]
}

allReducer (индекс):

import { combineReducers } from 'redux';
import labelsReducer from './labels';

const allReducers = combineReducers({
    labels: labelsReducer
});

export default allReducers;

store:

import { createStore } from 'redux';
import allReducers from './reducers/index'

function configureStore() {
    return createStore(allReducers);
}

export default configureStore;

APP

import React from 'react';
import './App.css';
import Labels from './components/Labels.jsx';

import { Provider } from "react-redux";
import configureStore from './store';

function App() {
  return (
    <Provider store={configureStore()}>
      <div className="App">
        <Labels />
      </div>
    </Provider>
  );
}

export default App;

Ярлыки:

import React from 'react';
import { connect } from 'react-redux';

class Labels extends React.Component {
    labelsList() {
        this.props.labels.map((label) => {
            return (
                <li key={label.id}>{labels.name}</li>
            )
        })
    }

    render() {
        return(
            <label>{this.labelsList()}</label>
        )
    }
}

function mapStateToProps(state) {
    return (
        labels: state.labels
    )
}

export default connect(mapStateToProps)(Labels);

Почему я получаю ошибку ниже. В чем проблема состояния соединения с редуктором ./src/components/Labels.jsx Строка 9:37: «метки» не определены no-undef Строка 23: 9: «метки» не определены no-undef

Answer 1

У вас есть

    this.props.labels.map((label) => {
        return (
            <li key={label.id}>{labels.name}</li>
        )
    })

{labels.name} должно быть {label.name}

В вашей функции обратного вызова у вас есть локальная переменная label, а также this.state.labels, но нет такого, который просто называется labels.

Answer 2

Вам необходимо использовать функцию connect из реактивного редуктора. Импортируйте вверху:

import { connect } from 'react-redux'

А внизу вашего компонента выполните:

connect(mapStateToProps, mapDispatchToProps)(labelsList)

РЕДАКТИРОВАТЬ:

function mapStateToProps(state) {
    return (
        labels: state.labels
    )
}

должно быть:

function mapStateToProps(state) {
    return {
        labels: state.labels
    }
}

(обратите внимание на фигурные скобки для возврата объекта, а не стандартные скобки)

и <li key={label.id}>{labels.name}</li> должны быть label.name. labels не существует как локальная переменная в области действия.