React

With

Redux

Objectives

  • Describe react-redux

  • Use the provider component to share a store

  • Use connect to mapStateToProps and mapDispatchToProps

React-Redux

A library to facilitate integrating React with Redux

Exposes a Provider component and a connect function

Handles: Listeners, passing in state to a component

React-Redux Install

npm install --save react-redux

Provider

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

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

Connect: Wrapping A Component

import React from 'react';
import {connect} from 'react-redux';
const BoldName = ({name}) => (
  <strong>{name}</strong>
);

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

export default 
  connect(mapStateToProps, null)(BoldName);

Connect: Wrapping A Component

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

const DelName = ({delName}) => (
  <button type="button"
    onClick={delName}>DELETE</button>
);

const mapDispatchToProps = (
  dispatch, ownProps
) => (
  { 
    delName: () => (dispatch({
      type: "DEL_NAME" 
    }))
   }
);

export default 
  connect(null, mapDispatchToProps)(DelName);

Using Wrapped Components

import React from 'react';
import BoldName from './BoldName';
import DelName from './DelName';

const App = () => (
  <div>
    <BoldName />
    <DelName />
  </div>
);

Your

Turn

React With Redux

By Elie Schoppik

React With Redux

  • 2,793

More from Elie Schoppik