React Duck
Implement ducks in React following the redux pattern but using React Context.
Usage
Create the ducks for each slice of application logic.
// duck/counter.js name: "counter" initialState: 0 reducers: state + 1 actionMapping: otherActionType: "increment" ;
Create the root/global duck as a combination of all other ducks.
// duck/index.jscounterDuck otherDuck;
Create the global context.
// context.js rootDuckreducer rootDuckinitialState "ContextName" enhancer useAsGlobalContext;
Note: The enhancer
may be optionally specified to enhance the context with third-party capabilities such as middleware, time travel, persistence, etc. The only context enhancer that ships with Ducks is applyMiddleware.
Note: The useAsGlobalContext
i.e. global
option; allows for setting a default context that is used by the useDispatch
and useSelector
hooks when no Context
is supplied. This is useful when creating the context that will be used with the root provider.
Use the state and actions in your component.
// app.jsx { const state dispatch = React; const count = statecounterDuckname; const increment = React; return <div> Count: <span>count</span> <button = /> </div> ;}
Note: The use of React.useContext
can be replaced with a combination of useDispatch
and useSelector
hooks.
// app.jsx... const count = ; const increment = ;...
Note: This is equivalent to the class component described below.
// app.jsxPureComponent static contextType = Context; { const state = thiscontext; return <div> Count: <span>statecounterDuckname</span> <button = /> </div> ; } { thiscontext; };
Wrap the application in the root provider to handle state changes.
// index.jsxconst rootElement = document;const Provider = ;ReactDOM;
Note: createRootProvider
is just a helper and can be replaced, with the functional difference highlighted below.
// index.jsxconst rootElement = document;ReactDOM
A side benefit to scoping the context state to the provider is allowing multiple entire apps to be run concurrently.
applyMiddleware(...middlewares)
This takes a variable list of middlewares to be applied.
Example: Custom Logger Middleware
// context.js { // Recommend making the returned dispatch method asynchronous. return async { console; // Call the next dispatch method in the middleware chain. const returnValue = await ; // Resolving the result of the next dispatch allows the referenced // state to be updated by `React.useReducer` and available to get. console; // This will likely be the action itself, unless // a middleware further in chain changed it. return returnValue; };} ... ;
See redux applyMiddleware for more documentation.
createConnect(Context?)
This a helper creates a function that can be used to smartly connect a component to your context value.
// connect.js = ;
Note: if the Context
argument is not supplied, the GlobalContext
is used.
Note: createConnect
is just a helper and can be replaced with a direct import and use of connect
.
Example Usage
// app.jsx { return <div> Count: <span>propscount</span> <button = /> </div> ;} state count: statecounterDuckname dispatch App;
See redux connect for more options.
Demo
As a proof of concept see the converted sandbox app from the react-redux basic tutorial below.
Suggestions
- Use
immer
to create immutable reducers, see guide