Kedux
Installation
First install with npm
or yarn
:
yarn add kedux
npm install kedux --save
Then include the reducer with kedux
key:
;; const reducer = ; const store = ; // Rest of the App
Usage
Suppose you build a simple tabs page using component state:
import React from 'react'; const tabData = 'tab1': 'TAB 1 content' 'tab2': 'TAB 2 content' 'tab3': 'TAB 3 content'; PureComponent state = activeKey: 'tab1' ; { this; } { const activeKey = thisstate; const content = tabDataactiveKey; return <div ="tabs"> <nav> Object </nav> <div ="tab-content"> content </div> </div> ; }
Now you can rewrite previous code using kedux:
import React from 'react';import PropTypes from 'prop-types';import withKedux from 'kedux'; const tabData = 'tab1': 'TAB 1 content' 'tab2': 'TAB 2 content' 'tab3': 'TAB 3 content'; @PureComponent static propTypes = activeKey: PropTypesnumber set: PropTypesfunc ; { // Dispatch action to set value to store // Use component-level name to set value thisprops; } { const activeKey = thisprops; const content = tabDataactiveKey; return <div ="tabs"> <nav> Object </nav> <div ="tab-content"> content </div> </div> ; }
API
In the above code, activeKey
is component-level name of the data which will be passed to the component as props. Kedux state is in the following format:
"somePage/tabs/activeTabKey": value: "tab1" ...