Simplifying your dispatch, subscribe, unsubscribe, and setStates with react-redux – FSA 1702, April 3 2017

react-redux-library.md

react-redux Library

FSA 1702, April 3 2017

react-redux helps us simplify subscribe, unsubscribe, setState, and dispatch by providing us components 'connected' to our store.

It also optimizes our re-renders by diffing our props changes, just like React diffs our virtual and rendered DOM.

---

Refactoring to react-redux

import {createStore} from 'redux';

const initialState = {
  this.whatever: 'value',
  this.whateverTwo: 'value2',
  this.whateverThree: 'value3'
}

const CHANGE_TITLE = 'CHANGE_TITLE';
const CHANGE_COLOR = 'CHANGE_COLOR';
const CHANGE_TEXT = 'CHANGE_TEXT';
const RECEIVE_ENTRIES = 'RECEIVE_ENTRIES';

function reducer(state = initialState, action) {
  switch(action.type) {
    case CHANGE_TITLE:
      return Object.assign({}, state, {
        inputTitle: action.newTitle
      });
    case CHANGE_COLOR:
      return Object.assign({}, state, {
        inputTitle: action.newColor
      });
    case CHANGE_TEXT:
      return Object.assign({}, state, {
        inputTitle: action.newText
      });
    case RECEIVE_ENTRIES:
      return Object.assign({}, state, {
        allEntries: action.entries
      });
    default:
      return state;
  }
}

const store = createStore(reducer);

We import {Provider} from react-redux, which gives us access to our store.

import {Connect, Provider} from 'react-redux';
import ourStore from './store';

// connect helps us make container components
const containerComponentCreator = connect(
  // This runs every time the store changes (creates a subscribe to the relevant states)

  function mapStateToProps (storeState) {
    // defines data for dumb component
    return {
      inputTitle: storeState.inputTitle,
      inputColor: storeState.inputColor
      inputText: storeState.inputText
      allEntries: storeState.allEntries
    }
  },
  function mapDispatchToProps (dispatch) {
    // defines methods for dumb component
    return {
      changeTitle: function (newTitle) {
        dispatch({
          type: CHANGE_TITLE,
          newTitle: newTitle
        });
      }
      changeColor: function (color) {
        dispatch({
          type: CHANGE_COLOR,
          newColor: color
        });
      }
      changeText: function (text) {
        dispatch({
          type: CHANGE_TEXT,
          newText: text
        });
      }
      retrieveEntries: function() {
        // big axios request to get entries
        // dispatch to store after getting value from server
      }
    }
  }
);

const DiaryAppContainer = containerComponentCreator(DiaryAppPresentational)

function Main () {
  return (
    <Provider store={ourStore}>
      <DiaryApp />
    </Provider>
  );

}

react-redux helps us remove setState and our subscribes/unsubscribes/dispatches to a single function that connects a component to the store. All of these are replaced with props.

Each time the store's state changes, the props on our components change, and they are re-rendered with the new data passed through the connect function's callbacks.

Provider wraps our Routers. will often be the top level component in our routers.

react-redux diffs our prop changes, just like React diffs our virtual DOM and rendered DOM. This further optimizes our re-renders so that we only change data if we've had props change.

By diffing our props intelligently, react-redux behaves a bit like React for React

Centralizing Axios with Redux-Thunk

We can use redux-thunk middleware to move our axios requests to our action-creator functions. All of our dispatches can look exactly the same -- a function invocation. Our centralized action-creators can handle the async stuff using axios and redux-thunk will dispatch them as functions to update our store's state.

---