const switchTheme=createAction('switchTheme')

const layoutReducer=newReducerBuilder<LayoutState>()

.handle(switchTheme, (state,action)=> {

const layoutReducer=newReducerBuilder<LayoutState>().handle(

switchTheme,

(state,action)=> {

const isDark=!state.layout.isDark

return {...state,isDark }

},

)

exportconst [store, mapStoreToProps]=newStoreBuilder<StoreState>()

exportconst { mapStoreToProps, connected,...store }=newStoreBuilder<

>()

.withReducerBuildersMap({ layout:layoutReducer })

.withDevTools()// enable chrome devtools

.build()

import {mapDispatchToProps }from'redux-ts'

import {mapStoreToProps,store }from'./store'

const Root:React.FC=props=> (

<Providerstore={store}>

<Main />

</Provider>

)

import {connected,mapStoreToProps,store }from'./store'

const storeProps=mapStoreToProps(store=> ({

const dispatchProps=mapDispatchToProps({switchTheme })

const Main=connect(storeProps,dispatchProps)(({theme,switchTheme })=> (

const ConnectedMain=connected(

storeProps,

dispatchProps,

)(({theme,switchTheme })=> (

<div>

<span>Current theme:{theme}</span>

<buttononClick={switchTheme}>Switch theme</button>

</div>

))

const Root:React.FC=props=> (

<Providerstore={store}>

<ConnectedMain />

</Provider>

)

ReactDOM.render(<Root />,document.getElementById('app'))

exportconst history=createBrowserHistory()

const routerReducer=connectRouter(history)

exportconst[store]=newStoreBuilder<StoreState>()

exportconst store=newStoreBuilder<StoreState>()

.withMiddleware(routerMiddleware(history))

.withReducer('router',routerReducer)

.withDevTools()// enable chrome devtools

import {StoreBuilder }from'redux-ts'

import {authReducer }from'./reducers/authReducer'

exportconst[store,mapStoreToProps]=newStoreBuilder<StoreState>()

exportconst{ connected, mapStoreToProps,...store }=newStoreBuilder<StoreState>()

.withInitialState({test:true})

.withMiddleware()

.withReducer("auth",authReducer)

- As generic parameter, it requires store state type in order to match given reducers and the state.

- Any number of middleware, enhancer or reducer can be used to build the state.

-`mapStoreToProps` is a dummy method that returns passed parameter again. This method can be used to map store object to props which are consumed from connected components. Return type is`MapStateToPropsParam` which is compatible with[connect](https://react-redux.js.org/api/connect).

-`connected` function is also another dummy function that wraps original[connect](https://react-redux.js.org/api/connect) function but with implicit type resolution support. Problem with original one, when you connect your component with connect method, it is trying to resolve typing by matching signature you passed as parameters to connect_(mapStateToProps, mapDispatchToProps)_ and component own properties. If you are using explicit typing mostly, it is totally fine to use original one. But if you are expecting implicit type resolution, original connect is failing and resolving inner component type as`never`.

[connect](https://react-redux.js.org/api/connect) method is part of[react-redux](https://github.com/reduxjs/react-redux) library that allows you to connect your react components with redux store.

import {connect }from'react-redux'

import {mapDispatchToProps }from'redux-ts'

import {mapStoreToProps }from'../store'

import {store }from'../store'

import {ChangeTheme }from'../actions/layout.actions'

import {Logout }from'../actions/auth.actions'

const { mapStoreToProps, connected }=store

const storeProps=mapStoreToProps(store=> ({

useDarkTheme:!!store.layout.useDarkTheme

})

exportconstLayout=connect(storeProps,dispatchProps)(({

exportconst Layout=connected(storeProps,dispatchProps)(({

children,// standard react prop

useDarkTheme,// mapped store prop

Logout,// mapped action prop

{

"name":"redux-ts",

"version":"4.2.0-rc.3",

"version":"4.2.0-rc.6",

"description":"Utils to define redux reducer/action in typescript",

"main":"dist/redux-ts.production.min.js",

"types":"lib/index.d.ts",

"build:prod":"webpack --config webpack.prod.js",

"clean":"rimraf dist lib",

"build":"npm run clean && npm run build:dev && npm run build:prod",

"prepublish":"npm run test && npm run build",

"prepare":"npm run test && npm run build",

"test":"mocha --require source-map-support/register --require ts-node/register tests/**/*.spec.ts"

},

"tags": [

type:string,

returntypeofmap==='function' ?mapper(map(dispatch,own)) :mapper(map)

exporttypeHOC<Pin,Pout>=(c:React.ComponentType<Pin>)=>React.ComponentType<Pout>

exporttypeIndexer<T=any>={[key:string]:T}

map:T|MapDispatchToPropsFunction<T,TOwn>,

):MapDispatchToPropsFunction<T,TOwn>

mapStoreToProps:StateToProps<StoreState>

mapStateToProps?:MapStateToPropsParam<TStateProps,TOwnProps,StoreState>,

mapDispatchToProps?:MapDispatchToPropsParam<TDispatchProps,TOwnProps>,

):HOC<TStateProps&TDispatchProps&TOwnProps,Exclude<TOwnProps,TStateProps&TDispatchProps>>

constdevTool:StoreEnhancer=f=>

privatemapStoreToProps:StateToProps<S>=map=>map

publicbuild():[Store<S>,StateToProps<S>]{

publicbuild():Store<S>{

(p:any,r)=>({

...store,

mapStoreToProps:map=>map,

connected:(mapStateToProps,mapDispatchToProps)=>mapDispatchToProps

?(connect(mapStateToProps,mapDispatchToProps)asany)

:(connect(mapStateToProps)asany)

isBasicActionCalled:true,

.withReducerBuildersMap({ reducer})

.withReducerBuildersMap({ reducer})

constinitState={reducer:{test:true}}

.withReducersMap({ reducer})

.withReducersMap({ reducer})

const[store]=newStoreBuilder().withReducersMap({ testReducer}).build()

conststore=newStoreBuilder().withReducersMap({ testReducer}).build()

.withReducersMap({ reducer})

"outDir":"./lib",

"lib": ["dom","es5","es2015.promise","es2015.core"]

},

"exclude": ["node_modules","tests"]

"exclude": ["node_modules","tests","lib","dist"]

}