React + Redux, почему не передаются данные?

Question

[Сергей Алексеев]

Добрый день, не передаются данные, делаю все правильно вроде, но не получаю данных:

Создание хранилища и рендеринг компонента
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { ListProject } from "./Components/Projects";
import { rootReducer } from "./Reducers/reducers";
import { createStore } from "redux";

export const store = createStore(
	rootReducer, 
	window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
	<Provider store={store}>
        <ListProject />
    </Provider>,
    document.getElementById("root")
);

Редусер
const initialState = {
  projects: ["Projects 001"]
};

export function rootReducer(state = initialState) {
  	return state;
}

Сам компонент с конектом
import React, { Component } from "react";
import { connect } from "react-redux";

export const ListProject = (props) => {
	console.log(props.projects);
    return <div>Привет из App, { props.projects }!</div>
}

const mapStateToProps = (state) => {
	projects: state.projects
}

export default connect(mapStateToProps)(ListProject);

Посмотрел много примеров везде передают данные в методе коннект, но у меня не работает, в чем может быть причина? Хранилище создается, редюсер работает.

Answer 1

[Антон Спирин]

Исправьте:

const mapStateToProps = (state) => {
  projects: state.projects
}

на:

const mapStateToProps = (state) => ({
  projects: state.projects
});

JavaScript парсер, в вашем случае, распознает фигурные скобки ни как возвращаемый функцией объект, а как тело блока функции, которая ничего не возвращает. Чтобы возвращать объект в короткой записи его необходимо заключать в скобки.

Comments

[Сергей Алексеев]

Не заработало

[Антон Спирин]

Сергей Алексеев, вы еще импортируете:

import { ListProject } from "./Components/Projects";

а, судя по примерам кода, надо:
import ListProject from "./Components/Projects";

[Сергей Алексеев]

Думаю не в этом дело

[Антон Спирин]

Сергей Алексеев, вы экспортируете сам компонент без обертки connect, естественно никаких свойств из redux в него передаваться не будет.

[BugsCreator]

Попробуйте так:

const mapStateToProps = (state) => {
  projects: state.rootReducer.projects
}

[Антон Спирин]

BugsCreator, вы бы ответ посмотрели, там объясняется почему такая конструкция не валидна в JavaScript. Ключ rootReducer в state не попадает.