April 09, 2021

use mapDispatchToProps to pass data

Instead of using setState of react, state management can be handled with mapDispatchToProps in redux. 

import React from 'react';
import { connect, Provider } from 'react-redux'
import { createStore } from 'redux'

// Redux:
const ADD = 'ADD';

const addMessage = (message) => { …
April 09, 2021

use Provider to wrap component

import React from 'react';
import { connect, Provider } from 'react-redux'
import { createStore } from 'redux'

// Redux:
const ADD = 'ADD';

const addMessage = (message) => {
  return {
    type: ADD,
    message: message
  }
};

const messageReducer = (state …
April 09, 2021

connect React component to Redux with connect api

connect function is defined in redux documentation as follows:

The connect function takes two arguments, both optional:

  • mapStateToProps: called every time the store state changes. It receives the entire store state, and should return an object of data this component needs.
  • mapDispatchToProps: this parameter can either be a function, or …
April 09, 2021

dispatch takes action

In react-redux, dispatch function takes action, which is an object that has type property. action as parameter usually comes as action creator, which returns action. 

import { createStore } from 'redux';
...

const store = createStore(exampleReducer)

store.dispatch(exampleActionCreator('do …
April 09, 2021

use Provider in react-redux

// App.js

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux'

// Redux
const ADD = 'ADD'

const addMessage = (message) => ({
  type: ADD,
  message
})

const messageReducer = (state = [], action) => …