redux dispatch code example

Example 1: redux action

import { createActions, handleActions, combineActions } from 'redux-actions';

const defaultState = { counter: 10 };

const { increment, decrement } = createActions({
  INCREMENT: (amount = 1) => ({ amount }),
  DECREMENT: (amount = 1) => ({ amount: -amount })
});

const reducer = handleActions({  
  [combineActions(increment, decrement)]: (state, action) => {
      return { ...state, counter: state.counter + action.payload.amount };
    }
  },
  defaultState
);

export default reducer;

Example 2: redux dispatch input onchange

const SearchBar = ({ searchQuery }) => 
  <Card>
    <div className={styles.searchFieldContainer}>
      <div className={styles.field}>
        <input type="text" onChange={(event)=> searchQuery(event.target.value)} placeholder="Search for items or sellers" />
      </div>
      <Button className={styles.searchButton}>
        Search
      </Button>
    </div>
  </Card>

const mapStateToProps = () => {
  return {

  }
} 

const mapDispatchToProps = (dispatch) => {
  return {
    searchQuery: (val) => dispatch(searchQuery(val))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);

Example 3: react return action in a function

import React, {useState} from 'react';

// Create a callback in the probs, in this case we call it 'callback'
function newCallback(callback) {
  callback('This can be any value you want to return')
}

const Callback = () => {

const [callbackData, setCallbackData] = useState('')

// Do something with callback (in this case, we display it on screen)
function actionAferCallback (callback) {
  setCallbackData(callback)
}

// Function that asks for a callback from the newCallback function, then parses the value to actionAferCallback
function requestCallback() {
  newCallback(actionAferCallback)
}

  return(
    <div>
      {/* A button to activate callback */}
      <button onClick={() => {requestCallback()}}>Request Callback</button>
      {callbackData}
    </div>
  )
}

export default Callback;

Example 4: redux acions

//npm i redux-actions or yarn add redux-actions

// single action creator
export const incAsyncCreator = createAction("INC");
export const decAsyncCreator = createAction("DEC");

// single action creator using - single reducer 
export const incReducer = handleAction(
  incAsyncCreator,
  (state, action) => ({
    ...state,
    counter: state.counter + 1,
    success: action.payload.success
  }),
  counterState
);

// single action creator using - single reducer 
export const decReducer = handleAction(
  incAsyncCreator,
  (state, action) => ({
    ...state,
    counter: state.counter + 1,
    success: action.payload.success
  }),
  counterState
);


//multiple action creator
export const { increment, decrement } = createActions({
  increment: (payload) => ({ ...payload }),
  decrement: (payload) => ({ ...payload })
});

// multiple action creator using - multiple reducer 
export const counterReducer = handleActions(
  {
    [increment]: (state, action) => ({
      ...state,
      counter: state.counter + 1,
      success: action.payload.success
    }),
    [decrement]: (state, action) => ({
      ...state,
      counter: state.counter - 1,
      success: action.payload.success
    })
  },
  counterState
);

Example 5: what is dispatch in redux

function dispatch(action) {
  // check that the action argument is an object
  if (typeof action !== 'object' || obj === null) {
    throw new Error('actions must be plain object.');
  }

  // check that the action object has a 'type' property
  if (typeof action.type === 'undefined') {
    throw new Error('Actions may not have an undefined "type" property.');
  }

  // call the reducer and pass in currentState and action
  reducer(currentState, action);
}