Setting up the 'react-redux' library

Outline

The react-redux module is the "official bindings" between react and redux. It adds some useful 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.

We are going to refactor our code so our App component contains, well, our app!

Note that we've also updated the defaultState.

To get started, add following code:

src/index.js

+ import App from './components/App';
+ import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
import React from 'react';
import { createStore } from 'redux';

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

const store = createStore(reducer);

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

For organization, let's a file called App.js inside of the src/ folder.

Now let's cut and paste the App component (i.e. the App class) into this file. Don't forget to import React!

Create App.js with the following code:

src/App.js

import React from 'react'; 

class App extends React.Component {
    constructor() {
        super();
        this.state = { };
    }

    componentWillMount() {
        store.subscribe(() => this.setState( store.getState() ));
    }

  render() {
    const onClick = () => store.dispatch({type: 'TOGGLE'});
    return (
        <div>
          <h1>Hello, World!</h1>
          <div>
            Learn Redux 
            <input 
                type="checkbox"
                checked={!!this.state.checked}
                onClick={onClick}
            />
          </div>
          {
            this.state.checked ? (<h2>Done!</h2>) : null
        }   
        </div>
    );
  }
}

Next, we'll use mapStateToProps() to access our specific state we want and pass it to props. Because we're using React Redux, we no longer need componentWillMount() or the constructor.

Then we use the connect() function to bind our state to the App component.

Refactor the App component to include React Redux

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

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

class App extends React.Component {
- constructor() {
-   super();
-   this.state = { };
-}

-componentWillMount() {
-   store.subscribe(() => this.setState( store.getState() ));
-}

  render() {
-   const onClick = () => store.dispatch({type: 'TOGGLE'});
    return (
        <div>
-      <h1>Hello, World!</h1>
+      { this.props.appName }
-      <div>
-       Learn Redux 
-       <input 
-           type="checkbox"
-           checked={!!this.state.checked}
-           onClick={onClick}
-       />
          </div>
-      {
-       this.state.checked ? (<h2>Done!</h2>) : null
-       }   
-       </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 :)

You should now see the app name displayed in your browser!

Go Pro to unlock all content & remove ads

Setting up the 'react-redux' library

Outline

Outline

I finished! On to the next chapter