Add new prop 'stateReducer' #320

serg-plusplus · 2018-01-30T20:43:36Z

What:

At now, you could provide your own function that could modify the state that will be set. You could check the type property of stateToSet against this list to know whether you want to modify how the state is changed. @kentcdodds

Why:
Chain of ideas: #319.

How:

  internalSetState(stateToSet, cb) {
    // ...
    return this.setState(
      state => {
        state = this.getState(state)
        stateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet

        // Your own function that could modify the state that will be set.
        stateToSet = this.props.modifyStateChange(stateToSet, state)
        
        // ...
      },
    // ...
  }

Checklist:

Documentation
Tests
Ready to be merged

Tests and documentation I can add tomorrow(if nobody else wants).
(modify my wording, if I stumbled somewhere 😁 )

At now, you could provide your own function that could modify the state that will be set.

codecov-io · 2018-01-30T20:48:39Z

Codecov Report

Merging #320 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #320   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           4      4           
  Lines         327    329    +2     
  Branches       82     82           
=====================================
+ Hits          327    329    +2

Impacted Files	Coverage Δ
src/downshift.js	`100% <100%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e4846d8...816c8a0. Read the comment docs.

kentcdodds

This is an awesome start! Let's get the docs and tests done and this is totally mergible. I'm really happy with it actually! It feels like a new really useful pattern that I'll want to write a blog about and make/update a few examples with :D

kentcdodds · 2018-01-31T13:49:49Z

README.md

+  origin of the change which has references in `Downshift.stateChangeTypes`
+  as in [`onStateChange`](#onstatechange).
+
+This is a pure function. You _might_ think of it as a simple reducer!


This is where I decided to switch the function signature to accept state first. I think some folks will get giddy about this 😉

Right. State first its better; like simple reducer.

kentcdodds · 2018-01-31T13:50:35Z

README.md

+  // selects an item with the keyboard
+  switch (stateToSet.type) {
+    case Downshift.stateChangeTypes.keyDownEnter:
+    case Downshift.stateChangeTypes.clickItem:


As I was copying your test over for the example I realized that if the user selected an item with the mouse it would still close and then realized we didn't have a type for that situation, so I added one in this PR 👍

I know, I planned to add { type: Downshift.stateChangeTypes.itemClick } here after that PR 😅.
(You already did it, COOL!)

kentcdodds · 2018-01-31T13:53:19Z

@NoTruth, could you give this a look over and make sure you like it? I'll merge it when you give me the 👍

serg-plusplus

I like it 👌! Thanks!

serg-plusplus · 2018-01-31T14:19:26Z

README.md

+  // selects an item with the keyboard
+  switch (stateToSet.type) {
+    case Downshift.stateChangeTypes.keyDownEnter:
+    case Downshift.stateChangeTypes.clickItem:


I know, I planned to add { type: Downshift.stateChangeTypes.itemClick } here after that PR 😅.
(You already did it, COOL!)

kentcdodds · 2018-01-31T14:26:37Z

Sweet. I'll merge this myself in an hour or two... I just tweeted about it and I'm sure we'll get some interesting feedback. I think maybe the prop name could be improved...

serg-plusplus · 2018-01-31T14:27:42Z

That's a good idea thank you!

kentcdodds · 2018-01-31T16:43:48Z

Someone suggested the name stateMiddleware. What do you think? Which is better modifyStateChange or stateMiddleware? I'm thinking that this is a pattern I want to encourage in the community. So the more general the better so there can be consensus and discoverability. That's why I'm leaning to stateMiddleware...

Though I actually kind of like stateReducer too 🤔

serg-plusplus · 2018-01-31T17:20:44Z

stateMiddleware looks good.
Also can still like stateChangeMiddleware or stateToSetMiddleware...

kentcdodds · 2018-01-31T17:21:06Z

What about stateReducer?

serg-plusplus · 2018-01-31T17:22:32Z

Yes, probably better reducer, because arguments looks like reducer arguments)

kentcdodds · 2018-01-31T17:23:06Z

Cool! I think I want to change it to stateReducer. Would you like to make that update? I can if not :)

serg-plusplus · 2018-01-31T17:27:04Z

I can forget somewhere to replace wording) сould You do it?

kentcdodds · 2018-01-31T17:29:51Z

Sure 👍

geoffdavis92 · 2018-01-31T17:44:30Z

This looks awesome. Great work @NoTruth @kentcdodds

serg-plusplus

cool, thanks

kentcdodds

This is ready!

serg-plusplus · 2018-01-31T18:31:21Z

Awesome, thanks!

kentcdodds · 2018-01-31T18:38:22Z

Thank you @NoTruth!

* Add new prop 'modifyStateChange' At now, you could provide your own function that could modify the state that will be set. * Add simple test for modifyStateChange prop * Update README.md * Update downshift.js * Update downshift.props.js * Update downshift.js * Update README.md * rename to stateReducer * cleanup readme wording * lock version * improve docs * typo fix * remove tics

Add new prop 'modifyStateChange'

dc7cda8

At now, you could provide your own function that could modify the state that will be set.

serg-plusplus requested a review from pbomb January 30, 2018 20:44

kentcdodds reviewed Jan 30, 2018

View reviewed changes

noTruth and others added 5 commits January 31, 2018 11:18

Add simple test for modifyStateChange prop

5bcfe7b

Update README.md

d7af203

Update downshift.js

b80c452

Update downshift.props.js

0d09552

Update downshift.js

c84f26b

kentcdodds previously approved these changes Jan 31, 2018

View reviewed changes

serg-plusplus commented Jan 31, 2018

View reviewed changes

Update README.md

f8d4ac7

kentcdodds dismissed their stale review via f8d4ac7 January 31, 2018 15:40

rename to stateReducer

39e245c

serg-plusplus commented Jan 31, 2018

View reviewed changes

Kent C. Dodds added 4 commits January 31, 2018 10:46

cleanup readme wording

44eb37c

lock version

574ebc3

improve docs

516cd5b

typo fix

85ccbc8

kentcdodds changed the title ~~Add new prop 'modifyStateChange'~~ Add new prop 'stateReducer' Jan 31, 2018

kentcdodds previously approved these changes Jan 31, 2018

View reviewed changes

remove tics

816c8a0

kentcdodds dismissed their stale review via 816c8a0 January 31, 2018 18:09

kentcdodds approved these changes Jan 31, 2018

View reviewed changes

kentcdodds merged commit 0e9c15c into downshift-js:master Jan 31, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add new prop 'stateReducer' #320

Add new prop 'stateReducer' #320

serg-plusplus commented Jan 30, 2018 •

edited

Loading

codecov-io commented Jan 30, 2018 •

edited

Loading

kentcdodds left a comment

kentcdodds Jan 31, 2018

serg-plusplus Jan 31, 2018

kentcdodds Jan 31, 2018

serg-plusplus Jan 31, 2018 •

edited

Loading

kentcdodds commented Jan 31, 2018

serg-plusplus left a comment •

edited

Loading

serg-plusplus Jan 31, 2018 •

edited

Loading

kentcdodds commented Jan 31, 2018

serg-plusplus commented Jan 31, 2018

kentcdodds commented Jan 31, 2018

serg-plusplus commented Jan 31, 2018

kentcdodds commented Jan 31, 2018

serg-plusplus commented Jan 31, 2018

kentcdodds commented Jan 31, 2018

serg-plusplus commented Jan 31, 2018

kentcdodds commented Jan 31, 2018

geoffdavis92 commented Jan 31, 2018

serg-plusplus left a comment

kentcdodds left a comment

serg-plusplus commented Jan 31, 2018

kentcdodds commented Jan 31, 2018

Add new prop 'stateReducer' #320

Add new prop 'stateReducer' #320

Conversation

serg-plusplus commented Jan 30, 2018 • edited Loading

codecov-io commented Jan 30, 2018 • edited Loading

Codecov Report

kentcdodds left a comment

Choose a reason for hiding this comment

kentcdodds Jan 31, 2018

Choose a reason for hiding this comment

serg-plusplus Jan 31, 2018

Choose a reason for hiding this comment

kentcdodds Jan 31, 2018

Choose a reason for hiding this comment

serg-plusplus Jan 31, 2018 • edited Loading

Choose a reason for hiding this comment

kentcdodds commented Jan 31, 2018

serg-plusplus left a comment • edited Loading

Choose a reason for hiding this comment

serg-plusplus Jan 31, 2018 • edited Loading

Choose a reason for hiding this comment

kentcdodds commented Jan 31, 2018

serg-plusplus commented Jan 31, 2018

kentcdodds commented Jan 31, 2018

serg-plusplus commented Jan 31, 2018

kentcdodds commented Jan 31, 2018

serg-plusplus commented Jan 31, 2018

kentcdodds commented Jan 31, 2018

serg-plusplus commented Jan 31, 2018

kentcdodds commented Jan 31, 2018

geoffdavis92 commented Jan 31, 2018

serg-plusplus left a comment

Choose a reason for hiding this comment

kentcdodds left a comment

Choose a reason for hiding this comment

serg-plusplus commented Jan 31, 2018

kentcdodds commented Jan 31, 2018

serg-plusplus commented Jan 30, 2018 •

edited

Loading

codecov-io commented Jan 30, 2018 •

edited

Loading

serg-plusplus Jan 31, 2018 •

edited

Loading

serg-plusplus left a comment •

edited

Loading

serg-plusplus Jan 31, 2018 •

edited

Loading