Redux adding toggle cheatsheet to self

Kevin Kim

Feb 13, 2020·2 min read

1. Add initial State in Reducers/initialState

i.e. Reducers/initialState/caseManager.js

Put in the shape of the state you’d like to access and update.

i.e.

export const caseManager = { 
  showFilters: true, 
  otherStateStuff: null 
}

2. Add to index of initial states in Reducer’s initial states

Reducers/initialState/index.js

import { client } from './client'import { filters } from './filters'import { locations } from './locations'import { screener } from './screener'import { nextSteps } from './nextSteps'import { ui } from './ui'import { caseManager } from './caseManager'export { client, filters, locations, screener, nextSteps, ui, caseManager }

3. Create a file in the Reducers (i.e. a slice)

Reducers/caseManager.js

import { caseManager as initialState } from './initialState'import { UPDATE_CASE_MANAGER } from 'Actions/caseManager'export default (state = initialState, action) => {  const { type } = action  switch (type) {    case UPDATE_CASE_MANAGER:      const { caseManager } = action      return {        ...state,        ...caseManager,
      }  default:    return state  }}

4. Add reducer to the index of Reducers

Reducers/index.js

import { combineReducers } from 'redux'import locations from './locations'import ui from './ui'import client from './client'import geolocation from './geolocation'import filters from './filters'import screener from './screener'import nextSteps from './nextSteps'import caseManager from './caseManager'import { reducer as formReducer } from 'redux-form'const appReducer = combineReducers({  locations,  ui,  caseManager,  client,  geolocation,  filters,  screener,  nextSteps,  form: formReducer,})const rootReducer = (state, action) => {  if (action.type === 'LOGOUT_CLIENT') {    state = undefined  }  return appReducer(state, action)}export default rootReducer

5. Create a file in Actions

i.e. Actions/caseManager.js

export const UPDATE_CASE_MANAGER = 'UPDATE_CASE_MANAGER'export const updateCaseManager = caseManager => {  return {    type: UPDATE_CASE_MANAGER,    caseManager,  }}export const toggleFilterColumn = () => (dispatch, getState) => {  const { caseManager } = getState()  const { showFilters } = caseManager  // getState() forces you to require a dispatch as it is async  dispatch(updateCaseManager({ showFilters: !showFilters }))}

6a. Connecting component to redux store for state

import React from 'react'import { connect } from 'react-redux'const ClientRecordsFilterColumn = ({ showFilters }) => {
return (  <StyledFilterColumn showFilters>  <StyledFilterColumnCard>)}const mapStateToProps = state => {const { caseManager } = stateconst { showFilters } = caseManagerreturn {showFilters,}}export default connect(mapStateToProps)(ClientRecordsFilterColumn)

6b. Connecting dispatch to redux store

import React from 'react'import { connect } from 'react-redux'import { toggleFilterColumn } from 'Actions/caseManager'const FilterBar = ({ showFilters, toggleFilterColumn }) => {return (<StyledFilterBar><StyledFilterSearchForm><StyledFilterSearchInput placeholder='Clients, Name, Phone Number, Email, Name and Date of Birth' /><StyledFilterSearchButton><Icon scale={'2.4rem'}>{searchIconPath}</Icon></StyledFilterSearchButton></StyledFilterSearchForm><StyledButtoncolor={showFilters ? 'on' : 'off'}onClick={toggleFilterColumn}>Filters</StyledButton></StyledFilterBar>)}const mapStateToProps = state => {const { caseManager } = stateconst { showFilters } = caseManagerreturn {showFilters,}}const mapDispatchToProps = dispatch => ({toggleFilterColumn: () => dispatch(toggleFilterColumn()),})export default connect(mapStateToProps, mapDispatchToProps)(FilterBar)