Redux adding toggle cheatsheet to self
- 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)