import React from 'react' ; import { Provider } from 'react-redux' ; import { AnyAction , applyMiddleware , createStore , Store } from 'redux' ; import thunk from 'redux-thunk' ; import { ThemeProvider } from 'styled-components' ; import { LocalRootState , rootReducer } from '../store/reducers' ; import { useSystemDesign } from '../design-system/useSystemDesign' ; import { mockReduxStore } from './mockReduxStore' ; param { object } initialState function returns { Store } export const storeFactory = ( initialState ) : Store < LocalRootState , AnyAction > => { const middlewares = [ thunk ] ; return createStore ( rootReducer , initialState , applyMiddleware ( ... middlewares ) ) ; } ; param { JSX . Element } component function returns { JSX . Element } const { darkTheme } = useSystemDesign ( ) ; export const withReduxAndStyledProviders = ( component ) : JSX . Element => { const store = storeFactory ( mockReduxStore ) ; return ( < ThemeProvider theme = { darkTheme } > < Provider store = { store } > { component } < /Provider> < /ThemeProvider>); } ;