I
I
Itvanya2016-08-04 11:52:43
React
Itvanya, 2016-08-04 11:52:43

Why is connect not working in react-redux?

I recently migrated from Flux to Redux, read the theory, used subscripts for a long time to hone my skills. Yesterday I installed react-redux for data binding, but nothing works. Everything is done according to the principle of the same as in the official documentation.

const React = require('react');
const ReactDOM = require('react-dom');
const { createStore } = require('redux');
const { connect, Provider } = require('react-redux');

let initialState = {
    userName : 'Greg'
};

function simpleReducer(state=initialState) {
  return state;
}

class App extends React.Component {
    render () {
        console.log(this.props); // Никаких props от Provider не получено, хотя в карне программы React-tools его показывает
        return (
                <div></div>
        );
    }
}

let store = createStore(simpleReducer); // Делаем store из самого простого редюсера

function mapStateToProps(state) { // Адресация props в компонент
    return {
        userName : state.userName
    };
}

connect(mapStateToProps)(App); // После этого по идее props должны попасть в App, но ничего нет

ReactDOM.render(<Provider store={store}><App/></Provider>, document.getElementById('root')); // Рендер

Guys, everything looks right. Where is the mistake? Syntactic sugar in the form of a decorator will not reduce the problem. Thank you.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Mikhail Osher, 2016-08-04
@Itvanya

TL;DR: RTFM
No.
connect(...)(component) returns a container that can already be rendered.

const Container = connect(mapStateToProps)(App); // После этого по идее props должны попасть в App, но ничего нет

ReactDOM.render(<Provider store={store}><Container /></Provider>, document.getElementById('root')); // Рендер

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question