vivekmunde

// toggle-theme-action.js
const toggleTheme = (dispatch, ...restArgs) => {
  const reducer = (currentState) => ({
    darkTheme: !currentState.darkTheme
  });
  dispatch(reducer);
};
export default toggleTheme;

// toggle-theme-button.js

vivekmunde

const mapStateToProps = arrayToMapStateToProps(['darkTheme']);

// same as below

const mapStateToProps = (currentState) => ({
  darkTheme: currentState.darkTheme
});

vivekmunde

const mapDispatchToProps = dispatch => ({
  getUserDetails: (userId) => {
    fetch('/api/user',args)
    .then((resp) => resp.json())
    .then((data) => {
      // update the state
      const reducer = (currentState) => ({
        userDetails: data.userDetails
      });
      dispatch(reducer);

vivekmunde

import { connectDispatch } from 'duxact';
...
const ThemeToggler = connectDispatch(mapDispatchToProps)(ToggleButton);

vivekmunde

import { connect } from 'duxact';

// Map the actions as props to the component
const mapDispatchToProps = dispatch => ({
  toggleTheme: () => {
    // Reducer receives the current state and returns the updated state
    const reducer = (currentState) => ({
      darkTheme: !currentState.darkTheme
    });

vivekmunde

import { connectState } from 'duxact';
...
const DarkThemeView = connectState(mapStateToProps)(DarkThemeLabel);

vivekmunde

import { connect } from 'duxact';
  
// Map the state as props to the component
// An object mapping the current value of darkTheme is returned
const mapStateToProps = (currentState) => ({
  darkTheme: currentState.darkTheme
});

// This object return from mapStateToProps is mapped as props & supplied to the component
// darkTheme is received as a porperty

vivekmunde

import { createStore, Provider } from 'duxact';

const store = createStore({ initial: 'state' });

const APP = () => (
  <Provider store={store}>
  ...
  </Provider>
);

vivekmunde

import { createStore, Provider } from 'duxact';

const store = createStore({ initial: 'state' });

vivekmunde

dist
   |__assets
        |__images
           |__blue-theme-logo-40cfba464935ff80190c3507e84d94b5.png
        |__bootstrap-c87a4c2c79156714058688911e8c1493.css
        |__bootstrap-a6614093a8f614bdac2df7cf89676516.js