Redux Redux Simple
An alternative way to connect React components to a Redux store.
;;;; Component static selectors = count: selectorsgetCount static actions = inc: actionsincrement dec: actionsdecrement { let count inc dec = thisprops; return <div> <button onClick=dec>-</button> <span>count</span> <button onClick=inc>+</button> </div> ; } Counter
Or with a functional component:
const Counter = <div> <button onClick=dec>-</button> <span>count</span> <button onClick=inc></button> </div>; Counterselectors = count: selectorsgetCount; Counteractions = inc: actionsincrement dec: actionsdecrement; Counter
Getting Started
You'll need to install both this package and react-redux
:
npm install react-redux react-redux-simple
Selectors
An optional mapping of prop names to selectors (a function which takes the state and returns a value).
static selectors = statecount
If your selectors depend on the components own props, then selectors
can be a function instead.
static statecount * propsmultiplier
A common pattern is to name your selectors and group them in their own file (or colocate them with reducers).
;; static selectors = tool: ToolSelectorsgetCurrentTool width: ViewSelectorsgetVisibleWidth height: ViewSelectorsgetVisibleHeight ;
Actions
An optional mapping of prop names to action creators (a function which returns an action).
static actions = type: "INCREMENT" amount
Another common pattern is to name and group actions in related files, then import them into the components that need them.
;; static actions = setTool: ToolActionssetCurrentTool setWidth: ViewActionssetVisibleWidth setHeight: ViewActionssetVisibleHeight ;
<Provide />
?
What about You still need to make sure that your components have access to the store. The easiest way to do this is to have a <Provide />
component at the root
of your component tree.
; // or from "react-redux-simple"; ReactDOM;
mergeProps
and options
?
What about This is designed to be a stupidly simple wrapper, if you need more control you can just use the React-Redux version of connect
for a component with specific needs.