ducks-modular-redux
ducks-modular-redux copied to clipboard
Export default state
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
.