Thinkster
React
Creating A Basic React-Redux Project
  •  

Setting up the 'react-redux' library

The react-redux module is the "official bindings" between react and redux. It adds some convenient syntactic sugar for binding your components to your redux state. The "Provider" component that you get from react-redux is how you tell react-redux about your redux store.

Import the Provider component and wrap it around the App component
import App from './components/App';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
import React from 'react';
import { applyMiddleware, createStore } from 'redux';

const defaultState = {
  appName: 'conduit',
  articles: null
};
const reducer = function(state = defaultState, action) {
  return state;
};

ReactDOM.render((
  <Provider store={store}>
    <App />
  </Provider>
), document.getElementById('main'));

Next, let's create the new App.js file.

The connect() function is how react-redux binds your redux state to your components. This mapStateToProps function maps the global redux state to the specific pieces of state that your component cares about and puts them into the props property. This is mostly for performance and testability purposes. The connect() function then takes in your mapStateToProps function and ties it to your App component.

Update the App.js file
import React from 'react';
import { connect } from 'react-redux';

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

class App extends React.Component {
  render() {
    return (
      <div>
        {this.props.appName}
      </div>
    );
  }
}

export default connect(mapStateToProps, () => ({}))(App);

Don't worry about the second function being passed to connect for now, as you'll learn about it later in this tutorial series.

 

I finished! On to the next chapter