Skip to content

Conversation

TheKnarf
Copy link

Now that we have React Hooks I've found the ducks pattern even more useful! With the [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer) hook I can easily switch a duck between using it with redux or a useReducer.

Now the useReducer hook require two pieces of data, the reducer and the defaultState. So in my own ducks I've had to also export my defaultState to be able to use it with a hook.

That way the usage with hooks becomes as follow:

import reducer, { defaultState } from 'some.ducks';
const MyComponent = () => {
   const [state, dispatch] = useReducer(reducer, defaultState);
   return <div>
   { state.somestate }
   </div>
}

This allows me to choose if I want to use the state locally for the component using useReducer or keep it globally in Redux. It also allows me to ex. start out with state in Redux for easy debugging and time traveling and then later take make the state component local if I see that I don't need it globally.

I hope you will accept this into the docs, as a consultant (doing both client work and developer training) I love being able to refer colleagues back to this repo as the "canonical" definition of the Ducks pattern.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant