No boilerplate with Redux-Leaves: simple usage

node v12.13.1
version: 2.1.1
endpointsharetweet
const { createStore } = require('redux') const { reduxLeaves, bundle } = require('redux-leaves') const initialState = { project: { agency: { name: 'Devs2U', revenue: 50000, costs: 80000 }, client: { name: 'MegaCorp', revenue: 1500000, costs: 7400000 }, budgeted: { days: 2, salaries: 10000 }, stagesCompleted: { discover: false, design: false, develop: false, test: false }, technologies: { languages: ['javascript'], libraries: ['react'] } }, persons: [ { name: 'Maisy Ware', title: 'CTO', employedBy: 'agency', status: 'determined' }, { name: 'Maddie Swanson', title: 'CTO', employedBy: 'client', status: 'anxious' }, { name: 'Kian Bernard', title: 'Junior Developer', employedBy: 'agency', status: 'eager' } ] }
All of our setup is below:
// all of our setup is here: const [reducer, actions] = reduxLeaves(initialState) const store = createStore(reducer) store.getState()
Now we can create actions for the changes that we want to see, and dispatch them
// At storeState.project.budgeted.days, I want to create an increment action store.dispatch(actions.project.budgeted.days.create.increment()) // Similar for storeState.project.budgeted.salaries, but I want to increment by 5000 store.dispatch(actions.project.budgeted.salaries.create.increment(5000)) store.getState()
// updating inside an array // At storeState.persons, I want to update the status property of the 1st element to excited store.dispatch(actions.persons[1].status.create.update('excited')) store.getState()
// do a bunch of things together store.dispatch(bundle([ actions.project.client.name.create.concat(' (definitely not evil)'), actions.project.stagesCompleted.discover.create.toggle(), actions.persons[0].create.set('lovesRedux', 'you bet!') ])) store.getState()
Play around as you see fit!
Loading…

no comments

    sign in to comment