Connect to state (bem-react-core)

README.md

• blocks
  • Screen
    • Actions
      • Screen-Actions.js
    • Reducer
      • Screen-Reducer.js
    • Screen.js
  • Root
    • Root.js
• state
  • index.js
• lib
  • connector.js

connector.js

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

export default function connectToState(inst) {
  const Connected = connect(inst.stateToProps, dispatch => {
    return {
      ...bindActionCreators(inst.actions || {}, dispatch),
      dispatch
    };
  })(inst);

  return Connected;
};

index.js

import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from 'redux-thunk';

import Screen from 'b:Screen';

const actionCreators = {
  ...Screen.actions
};

const rootReducer = combineReducers({
  screen: Screen.reducer
});

const enhancer = compose(
  applyMiddleware(thunk),
  window.devToolsExtension ?
    window.devToolsExtension({ actionCreators }) :
    noop => noop
);

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState, enhancer);

  if (window.devToolsExtension) {
    window.devToolsExtension.updateStore(store);
  }

  if (module.hot) {
    store.replaceReducer(rootReducer);
  }

  return store;
}

Root.js

import React from 'react';
import { decl } from 'bem-react-core';

import Screen from 'b:Screen';

const СScreen = connect(Screen);

export default decl({
  block: 'Root',
  content() {
    return <СScreen />;
  }
});

Screen-Actions.js

import {createAction} from 'redux-actions';

export const select = createAction('SELECT_SCREEN');

Screen-Reducer.js

import { handleActions } from 'redux-actions';

export default handleActions({
  SELECT_SCREEN: (state, action) => ({
    name: action.payload
  })
}, {});

Screen.js

import React from 'react';
import { decl } from 'bem-react-core';

import * as actions from './Actions/Screen-Actions';
import reducer from './Reducer/Screen-Reducer';

export default decl({
  block: 'Screen'
}, {
  actions,
  reducer,
  stateToProps: state => ({
    current: state.screen.name
  })
});