Skip to content

Instantly share code, notes, and snippets.

@meChrisReed
Created March 18, 2018 11:38
Show Gist options
  • Save meChrisReed/84843545e70887a63bc5dfcc2eb4bd2b to your computer and use it in GitHub Desktop.
Save meChrisReed/84843545e70887a63bc5dfcc2eb4bd2b to your computer and use it in GitHub Desktop.
redux normal; for an article
export const REPLACE_THINGS = "REPLACE_THINGS"
export const REMOVE_THING = "REMOVE_THING"
export const ACCUMULATE_THINGS = "ACCUMULATE_THINGS"
export const RESET_THINGS = "RESET_THINGS"
export const UI_THING_ON = "UI_THING_ON"
export const UI_THING_OFF = "UI_THING_OFF"
import { RESET_THINGS } from "./actions"
const enhance = connect(({ things }) => ({ things }), {
resetThings: things => ({
type: RESET_THINGS,
things
})
})
const CoolComponent = ({ things, resetThings }) => (
<Fragment>
<button onClick={resetThings}> Reset </button>
{things.map(i => <span>{i}</span>)}
</Fragment>
)
enhance(CoolComponent)
// define the first reducer
import {
REPLACE_THINGS,
REMOVE_THING,
ACCUMULATE_THINGS,
RESET_THINGS,
CLICKED_A_THING
} from "./actions"
export const thingsReducer = (state = [], { type, id, things, thing }) => {
switch (type) {
case REPLACE_THINGS:
return things
case REMOVE_THING:
return state.filter(i => i.id !== id)
case ACCUMULATE_THINGS:
return [...state, thing]
case RESET_THINGS:
return []
default:
return state
}
}
// define yhe second reducer
import { CLICKED_A_THING, UI_THING_ON, UI_THING_OFF } from "./actions"
export const uiThingReducer = (state = false, { type }) => {
switch (type) {
case RESET_THINGS:
return false
case UI_THING_ON:
return true
case UI_THING_OFF:
return false
default:
return state
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment