ducks-modular-redux icon indicating copy to clipboard operation
ducks-modular-redux copied to clipboard

Export default state

Open TheKnarf opened this issue 5 years ago • 0 comments

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.

TheKnarf avatar Aug 14 '19 10:08 TheKnarf